013-WebSocket

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）运行。首先进入登录页面，两个用户各自登录，如图：

登录成功，进入聊天室，如图：

现在分别互相发送消息，可以看到各自都能接收，如图：

这就是基于点对点的消息模式。