WebSocket是html5带来的一项重大的特性,使得浏览器与服务端之间真正长连接交互成为了可能,这篇文章会带领大家窥探一下Spring 对WebSocket的支持及使用。
在HTTP/1.0中,默认使用的是短连接。也就是说,浏览器和服务器每进行一次HTTP操作,就建立一次连接,但任务结束就中断连接。
但从 HTTP/1.1起,默认使用长连接,用以保持连接特性。使用长连接的HTTP协议,会在响应头有加入这行代码:Connection:keep-alive
在使用长连接的情况下,当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的 TCP连接不会关闭HTTP协议的长连接和短连接,这两种实质上是TCP协议的长连接和短连接。项目结构
|
|
1.Maven引入Jar包
|
|
2.编写客户端发送的消息和服务端回复的消息Java类
|
|
|
|
注意在上面要有默认的构造器,没有的话,则会出现下面问题
这是因为序列化后,如果没有默认的构造器,则会让Springboot的默认序列化Jackson不能构造成原来的对象,反序列化还是需要通过默认的构造器来实现的 。
客户端发送HelloMessage,服务端服务以Greeting。
####3.Websocket配置类
- registry.addEndpoint(“/socket”)表示添加了一个/socket端点,客户端和服务端就可以通过这个端点来进行连接。
- withSockJS()的作用是开启SockJS支持
- @EnableWebSocketMessageBroker别忘了。
- configureMessageBroker(MessageBrokerRegistry config)定义消息代理,也就是服务端和客户端他们之间交换消息的规范。
config.enableSimpleBroker(“/topic”);表明客户端接受服务端的消息时候,服务端的请求地址前缀。
config.setApplicationDestinationPrefixes(“/app”)表明服务端接受客户端时候,客户端的请求地址前缀。4. 编写业务代码
12345678910111213141516171819202122package hello.controller;import hello.messaage.Greeting;import hello.messaage.HelloMessage;import org.springframework.messaging.handler.annotation.MessageMapping;import org.springframework.messaging.handler.annotation.SendTo;import org.springframework.stereotype.Controller;/*** Created by maskwang on 2017/10/12 0012.*/public class GreetingController {"/hello")(//转发给服务端"/topic/greetings")(public Greeting greeting(HelloMessage message) throws Exception {Thread.sleep(1000); // simulated delayreturn new Greeting("Hello, " + message.getName() + "!");}}
- @SendTo(“/topic/greetings”)是客户端发起连接后,订阅服务端消息时指定的一个地址,用于接收服务端的返回,也就是服务端返回的消息在客户端在订阅这个地址的消息后,客户端可以收到。定义怎样的客户端。
- @MessageMapping(“/hello”)定义这个地址客户端发送的消息就会被映射这样的服务端。也就是客户端寻找那个服务端。定义了什么样的服务端。
理解上面两点很重要,后面都与这有关。
5. 前端代码
|
|
编写js
前端我们需要用到两个js文件:sockjs.js和stomp.js
SockJS:SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。
StompStomp 提供了客户端和代理之间进行广泛消息传输的框架。Stomp 是一个非常简单而且易用的通讯协议实现,尽管代理端的编写可能非常复杂,但是编写一个 Stomp 客户端却是很简单的事情,另外你可以使用 Telnet 来与你的 Stomp 代理进行交互。
开启Socket
- var socket = new SockJS(‘/socket’); 先构建一个SockJS对象
- stompClient = Stomp.over(socket); 用Stomp将SockJS进行协议封装
- stompClient.connect()与服务端进行连接,同时有一个回调函数,处理连接成功后的操作信息。发送消息
stompClient.send(“/app/hello”, {}, JSON.stringify({‘name’: $(“#name”).val()}));是客户端向服务端发送消息
stompClient.subscribe(‘/topic/greetings’, function (greeting) {
showGreeting(JSON.parse(greeting.body).content); }); //是服务端向客户端发送消息
点击connect后,发动任何message,服务端都会延迟一秒后,回复hello,message!