WebSocket为浏览器和服务端提供了双方异步通信的功能,让浏览器可以向服务端发送消息,服务端也可以向浏览器发送消息。WebSocket需要浏览器的支持,如IE10+、Chrome13+、Firefox6+等,这对于我们现在的浏览器来说都不是问题。
WebSocket是通过一个socket来实现双工异步通信能力的,但是直接使用WebSocket(或者SockJS:WebSocket的模拟,增加了当浏览器不支持WebSocket的时候的兼容支持)协议开发程序过于繁琐,可以使用自斜阳STOMP,它是一个更高级别的协议,STOMP协议使用一个基于帧(frame)的格式来定义消息,与HTTP的request和response类似(具有类似于@RequestMapping和@MessageMapping)。
首先新建一个项目,添加WebSocket依赖:
广播式
即服务端有消息时,会将消息发送给所有连接了当前endpoint的浏览器。
(1)配置WebSocket,需要在配置类上使用@EnableWebSocketMessageBroker 开启WebSocket支持,并通过继承AbstractWebSocketMessageBrokerConfigurer类,重写其方法来配置WebSocket。如图:
(2)浏览器向服务端发送的消息用此类接受:
(3)服务端向浏览器发送的此类的消息:
(4)演示控制器
(5)添加脚本。将stomp.min.js(STOMP协议的客户端脚本)、sockjs.min.js(SockJS的客户端脚本)以及jQuery放置在src/main/resources/static 目录下。可以自行下载这些脚本文件。
(6)演示页面。在 src/main/resources/templates 目录下新建ws.html文件,代码如下:
(7)配置Controller,为ws.html提供便捷的路径映射:
(8)运行。广播的预期效果是,一个浏览器发送消息,多个浏览器都能接收到返回消息。现在开启三个浏览器,并连接:
现在在第一个里面发送名字,
可以看到,所有浏览器都接收到了返回的消息!
点对点式
广播式应用广泛,但是不能解决消息谁发送谁接收的问题,因此需要点对点的消息推送模式。
(1)下面演示一个聊天室,需要两个用户。因为用户相关,所以引入security:
(2)加入security简单配置,不做过多说明,只在代码中注释解释有用的部分:
(3)配置WebSocket:
(4)控制器。在WsController内增加如下代码:
(5)登录页面。在 src/main/resources/templates下新建 login.html,如下:
(6)聊天页面。在src/main/resources/templates下新建chat.html页面,如下:
(7)增加页面的viewController:
(8)运行。首先进入登录页面,两个用户各自登录,如图:
登录成功,进入聊天室,如图:
现在分别互相发送消息,可以看到各自都能接收,如图:
这就是基于点对点的消息模式。