WebSocket入门教程

时间:2019-10-06 22:21来源: 操作系统
See more: Spring WebSocketreference整个例子属于WiseMenuFrameWork的一局地,能够将整个项目Clone下来,要是恋人们有需要,笔者得以整理三个单独的demo出来。 See more: Spring WebSocketreference整个例子属

See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一局地,能够将整个项目Clone下来,要是恋人们有需要,笔者得以整理三个单独的demo出来。

See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,能够将整个项目Clone下来,要是情人们有须要,我能够整理二个单身的demo出来。

接上一篇:Spring WebSocket初探1 (Spring WebSocket入门教程)

WebSocket是html5牵动的一项根本的性状,使得浏览器与服务端之间确实长连接交互成为了大概,那篇文章会指导我们窥伺者一下Spring 对WebSocket的支撑及运用。

前端大家必要用到四个js文件:sockjs.js和stomp.js

高速搭建Spring框架,大家运用Spring boot,这里先不研究SpringBoot,只晓得它是一个“火速搭建Spring项目标一条龙应用方案”就OK了。要使用Spring的WebSocket作用,大家须要加上依赖:

  • SockJS:SockJS 是八个浏览器上运行的 JavaScript 库,若是浏览器不支持 WebSocket,该库能够上行下效对 WebSocket 的援救,落成浏览器和 Web 服务器之间低顺延、全双工、跨域的报导通道。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId></dependency>
  • StompStomp 提供了客商端和代理之间进行普及音信传输的框架。Stomp 是二个特简单并且易用的通信左券落到实处,就算代理端的编辑撰写大概极其复杂,可是编写一个Stomp 顾客端却是很轻巧的政工,别的你能够使用 Telnet 来与您的 Stomp 代理举行互动。

如此就自在张开了WebSocket基础功用。

html代码

上面大家来布置WebSocket。首先新扩展五个WebSocketConfig类,定义全局的布局新闻,使用JavaConfig的情势:WebSocketConfig.java

<div> <div> <button onclick="connect();">Connect</button> <button disabled="disabled" onclick="disconnect();">Disconnect</button> </div> <div > <p> <label>notice content?</label> </p> <p> <textarea rows="5"></textarea> </p> <button onclick="sendName();">Send</button> <p ></p> </div></div>
@Configuration@EnableWebSocketMessageBrokerpublic class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/socket").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker; registry.setApplicationDestinationPrefixes; }}

javascript代码

相关认证:

<script src="/js/sockjs-0.3.4.min.js"></script><script src="/js/stomp.min.js"></script><script> var stompClient = null; function setConnected(connected) { document.getElementById('connect').disabled = connected; document.getElementById('disconnect').disabled = !connected; document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden'; document.getElementById('response').innerHTML = ''; } // 开启socket连接 function connect() { var socket = new SockJS('/socket'); stompClient = Stomp.over; stompClient.connect({}, function  { setConnected; } // 断开socket连接 function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected; console.log("Disconnected"); } // 向‘/app/change-notice’服务端发送消息 function sendName() { var value = document.getElementById.value; stompClient.send("/app/change-notice", {}, value); } connect();</script>
  1. registerStompEndpoints(StompEndpointRegistry registry)本条格局的功力是增多多个劳务端点,来收纳顾客端的三番五次。

连锁认证:关于JavaScript实现WebSocket的效果与利益很轻易,基本分以下几步:

  • registry.addEndpoint("/socket")意味着增添了一个/socket端点,客商端就足以经过这么些端点来开展连接。
  • withSockJS()的职能是展开SockJS帮忙,
  1. var socket = new SockJS('/socket'); 先塑造三个SockJS对象
  2. stompClient = Stomp.over; 用Stomp将SockJS实行磋商封装
  3. stompClient.connect() 与服务端举行连接,同有的时候候有一个回调函数,管理连接成功后的操作新闻。
  1. configureMessageBroker(MessageBrokerRegistry config)本条主意的职能是概念新闻代理,通俗一点讲正是设置音信连接诉求的各样标准新闻。

stompClient.send("/app/change-notice", {}, value);

  • registry.enableSimpleBroker代表顾客端订阅地址的前缀音信,也正是客商端接收服务端新闻的地点的前缀新闻(相比较绕,看完全体例子,大概就能够知晓了)
  • registry.setApplicationDestinationPrefixes指服务端接收地址的前缀,意思正是说顾客端给劳务端发新闻的地方的前缀

页面预览:

上边八个格局定义的信息实际是倒转的,七个概念了客商端接收的地址前缀,多少个定义了顾客端发送地址的前缀

图片 1Paste_Image.png图片 2

到近日甘休,整个框架的配置音讯已经到位,下边大家来写三个出殡和埋葬布告的例子,显示一下WebSocket的吸重力!

当大家发送公告后,将上海体育场合的公告新闻在不刷新页面包车型地铁场地下,使用WebSocket将其改造。发送公告的前端代码已经完成,未来我们来写另三个顾客端,用来收纳第三个页面发送的公告,体以后上海体育地方红框中。功效相比轻易,所以上边只交付部分js代码:

有了上述的骨干配备新闻,大家就足以编写制定基本作用了。这里先轻巧表达三个知识点:

var noticeSocket = function () { var s = new SockJS('/socket'); var stompClient = Stomp.over; stompClient.connect({}, function () { console.log('notice socket connected!'); stompClient.subscribe('/topic/notice', function  { $('.message span.content').html(data.body); }); });};
  1. MessageMappingSpring对于WebSocket封装的特意轻松,提供了七个@MessageMapping批注,效能类似@RequestMapping,它是存在于Controller中的,定义叁个新闻的为主央求,功效也跟@RequestMapping看似,富含协助通配符``的url定义等等,详细用法参见Annotation Message Handling
  2. SimpMessagingTemplateSimpMessagingTemplate是Spring-WebSocket内置的三个音信发送工具,能够将音信发送到钦点的客商端。

相关认证:这里与发送公告代码分歧的是,在stompClient创造连接成功现在,我们要监听服务端发送过来的音信,接收到将来,更改页面上布告的从头到尾的经过,所以用到了stompClient.subscribe()这个subscribe()措施效果正是概念二个订阅地址,用来选用服务端的音讯(在服务端代码中,大家在@SendTo中钦定了这些订阅地址“/topic/notice”),当接过新闻后,在回调函数中拍卖工作逻辑。

上边大家来兑现:

时到现在天,全部的功效开荒完结!

新建三个GreetingController

率先我们公布一条公告:

@Controllerpublic class GreetingController { @Resource private SimpMessagingTemplate simpMessagingTemplate; @RequestMapping("/helloSocket") public String index(){ return "/hello/index"; } @MessageMapping("/change-notice") public void greeting(String value){ this.simpMessagingTemplate.convertAndSend("/topic/notice", value); }}

图片 3

连锁证明:

然后大家切到另三个页面,发现内容已变:

  1. index()钦赐了一个页面,用来兑现WebSocket顾客端发送通知效能,使用的是@RequestMapping,所以摄取的是http诉求,实行页面跳转。
  2. greeting(String value)这一个主意是吸收接纳顾客端发送功文告的WebSocket哀告,使用的是@MessageMapping
  3. this.simpMessagingTemplate.convertAndSend("/topic/notice", value)这一个方法官方给出的演讲是Convert the given Object to serialized form, possibly using a MessageConverter, wrap it as a message and send it to the given destination. 意思就是“将加以的对象实行体系化,使用‘MessageConverter’进行打包转化成一条音信,发送到钦定的靶子”,通俗点讲正是我们采纳那一个法子开展信息的转向发送!

图片 4

前边大家全局配置中钦定了服务端接收的连年以 app大洋,所以客商端发送通告的乞请连接应该是/app/change-notice。服务端代码就那样轻巧,跟写SpringMVC类似,一样上边的geeting(String value)方法大家还是能够动用另贰个阐明@SendTo换到另一种写法。

@MessageMapping("/change-notice")@SendTo("/topic/notice")public String greeting(String value) { return value;}

连锁认证:立异后的代码更轻易,注重明白一下@SendTo

  • @SendTo概念了消息的指标地。结合例子解释就是“接收/app/change-notice发来的value,然后将value转发到/topic/notice客户端。
  • /topic/notice是用户端发起连接后,订阅服务端消息时钦命的一个地点,用于吸收接纳服务端的归来,前面大家在写顾客端代码的时候会看到。

到近年来截止,服务端代码Coding实现!下一篇文章大家来写顾客端功效。

传送门:Spring WebSocket初探2 (Spring WebSocket入门教程)

编辑: 操作系统 本文来源:WebSocket入门教程

关键词:

  • 上一篇:没有了
  • 下一篇:没有了