开题思考：如何实现客户端及时获取服务端数据？
Polling
指客户端每隔一段时间（周期性）请求服务端获取数据，可能有更新数据返回，也可能什么都没有，它并不在乎服务端数据有无更新。（Web端一般采用ajax polling实现）
Long Polling
阻塞型Polling，和Polling不同的是假如服务端数据没有准备好，那么可能会hold住请求，直到服务端有相关数据，或者等待一定时间超时才会返回。
WebSocket
HTML5 WebSocket规范定义了一种API，使Web页面能够使用WebSocket协议与远程主机进行双向通信。与轮询和长轮询相比，巨大减少了不必要的网络流量和等待时间。
Websocket体系结构
Websocket协议
WebSocket协议被设计成与现有的Web基础结构很好地工作。该协议规范定义了HTTP连接作为WebSocket连接生命的开始，从Http协议转换成WebSocket，被称为WebSocket握手。
-
浏览器向服务器发送请求，表示它希望将协议从HTTP切换到WebSocket。客户端通过升级报头表达其愿望：
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com -
从上面的报文可以看到，和HTTP协议的请求中，多了几样东西，核心就是Upgrade和Connection两个参数，用来告诉服务器，我需要升级为Websocket：
Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 -
如果服务端能够理解WebSocket协议，它同意以Upgrade头字段来升级协议，会响应以下信息：
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept:HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat -
此时，HTTP连接中断，并由同一底层TCP/IP连接上的WebSocket连接替换。 默认情况下，WebSocket连接使用与HTTP（80）和HTTPS（443）相同的端口。
Spring-WebSocket实战
Spring框架提供了WebSocket支持，很容易实现相关功能，此处分享一下使用Spring集成WebSocket实现简单的多人会议系统。
服务端相关代码
-
MeetingController （很简单的一个入口，创建会议，并生成会议id和对应随机串）
@Controller public class MeetingController { private static AtomicInteger id = new AtomicInteger(0); @RequestMapping(value = "/meeting", method = RequestMethod.POST) @ResponseBody public Map
-
WebSocketConfig （通过WebSocketConfigurer来配置定义自己的Websocket处理器和拦截器）
@Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { /** * 注册websocket处理器以及拦截器 */ registry.addHandler(meetingWebSocketHandler(), "/websocket/spring/meeting").addInterceptors(myInterceptor()); } @Bean public MeetingWebSocketHandler meetingWebSocketHandler() { return new MeetingWebSocketHandler(); } @Bean public WebSocketHandshakeInterceptor myInterceptor() { return new WebSocketHandshakeInterceptor(); } }
-
WebSocketHandshakeInterceptor （握手拦截器，用于处理请求携带参数）
public class WebSocketHandshakeInterceptor implements HandshakeInterceptor { @Override public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map
-
MeetingWebSocketHandler（websocket处理器，用于接受客户端发送各种类型数据，主要分为数据帧和控制帧）
@Service public class MeetingWebSocketHandler extends TextWebSocketHandler { private static final Log LOG = LogFactory.getLog(MeetingWebSocketHandler.class); // 会议id和wsSession列表 private static final ConcurrentHashMap
webSocketSessions = meetingWsSeesionMap.get(meetingId); webSocketSessions.add(session); } // 如果不存在，则新建 else { CopyOnWriteArraySet webSocketSessions = new CopyOnWriteArraySet<>(); webSocketSessions.add(session); meetingWsSeesionMap.put(meetingId, webSocketSessions); } } @Override public void handleTextMessage(WebSocketSession session, TextMessage message) { if (!session.isOpen()) return; LOG.info(message.getPayload()); int meetingId = getMeetingId(session); TextMessage wsMessage = new TextMessage(message.getPayload()); broadcastMessage(meetingId, wsMessage); } /** * 发送信息给指定用户 * @param clientId * @param message * @return */ public void singleMessage(WebSocketSession session, TextMessage message) { if (!session.isOpen()) return; try { session.sendMessage(message); } catch (IOException e) { e.printStackTrace(); } } /** * 广播信息 * @param message * @return */ public void broadcastMessage(int meetingId, TextMessage message) { // 获取会议所有的wsSession CopyOnWriteArraySet webSocketSessions = meetingWsSeesionMap.get(meetingId); for (WebSocketSession session : webSocketSessions) { try { if (session.isOpen()) { session.sendMessage(message); } } catch (IOException e) { e.printStackTrace(); } } } @Override public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception { if (session.isOpen()) { session.close(); } LOG.info("连接出错"); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { LOG.info("连接已关闭：" + status); int meetingId = getMeetingId(session); // role 1为主持人 String role = String.valueOf(session.getAttributes().get("role")); // 如果是主持人，则关闭所有该会议连接 CopyOnWriteArraySet webSocketSessions = meetingWsSeesionMap.get(meetingId); if (StringUtils.equals("1", role)) { SystemCache.idRandStrMap.remove(meetingId); for (WebSocketSession webSocketSession : webSocketSessions) { webSocketSession.close(); } webSocketSessions.remove(meetingId); } else { webSocketSessions.remove(session); } } @Override public boolean supportsPartialMessages() { return false; } private int getMeetingId(WebSocketSession session) { String randStr = String.valueOf(session.getAttributes().get("randStr")); int meetingId = SystemCache.getMeetingIdByRandStr(randStr); return meetingId; } } -
SystemCache（系统缓存，集群部署的情况下，可改为redis实现分布式缓存，单机则不需要）
public class SystemCache { // 会议id和随机字符串的映射关系 public static ConcurrentHashMap
前端相关代码
-
meeting-create.html（主持人页面，用于创建会议并且可以发送消息）
DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>在线会议系统title> head> <body> <h2>欢迎使用会议系统h2> <button id="create" onclick="createMeeting()">创建会议button> <hr /> <div id="meeting">div> 消息内容： <input id="text" type="text" /> <button id="send" disabled="disabled" onclick="send()">发送消息button> <hr /> <button id="close" onclick="closeWebSocket()">结束会议button> <hr /> <div id="message">div> body> <script type="text/javascript" src="js/jquery-1.12.0.js">script> <script type="text/javascript"> var websocket = null; var randStr; var remote = window.location.host; function openWebsocket() { //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://" + window.location.host + "/websocket/spring/meeting?role=1&randStr=" + randStr); //连接发生错误的回调方法 websocket.onerror = function() { setMessageInnerHTML("会议连接发生错误!"); }; //连接成功建立的回调方法 websocket.onopen = function() { setMessageInnerHTML("会议连接成功..."); document.getElementById("send").disabled = false; } //接收到消息的回调方法 websocket.onmessage = function(event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function() { setMessageInnerHTML("会议结束，连接关闭!"); document.getElementById("create").disabled = false; document.getElementById("send").disabled = true; } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常 window.onbeforeunload = function() { closeWebSocket(); } } else { alert('当前浏览器 Not support websocket'); } } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '
'; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var content = document.getElementById('text').value; websocket.send(content); } function createMeeting() { $.post("/meeting", function(data, status) { randStr = data.randStr; $("#create").after("会议邀请码：
" + randStr + ""); $("#create").attr("disabled", true); openWebsocket(); }); } script> html> -
meeting-join.html（观众页面，用于加入会议并且也可以发送消息）
DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>在线会议系统title> head> <body> <h2>欢迎使用会议系统h2> 会议邀请码： <input id="randStr" type="text" /> <button id="open" onclick="openWebsocket()">加入会议button> <hr /> 消息内容： <input id="text" type="text" /> <button id="send" disabled="disabled" onclick="send()">发送消息button> <hr /> <button id="close" disabled="disabled" onclick="closeWebSocket()">离开会议button> <hr /> <div id="message">div> body> <script type="text/javascript"> var websocket = null; var remote = window.location.host; function openWebsocket() { var randStr = document.getElementById('randStr').value; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://" + window.location.host + "/websocket/spring/meeting?randStr=" + randStr); //连接发生错误的回调方法 websocket.onerror = function() { setMessageInnerHTML("会议连接发生错误!"); }; //连接成功建立的回调方法 websocket.onopen = function() { setMessageInnerHTML("会议连接成功..."); document.getElementById("open").disabled = true; document.getElementById("randStr").disabled = true; document.getElementById("send").disabled = false; document.getElementById("close").disabled = false; } //接收到消息的回调方法 websocket.onmessage = function(event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function() { setMessageInnerHTML("会议结束，连接关闭!"); document.getElementById("randStr").disabled = false; document.getElementById("open").disabled = false; document.getElementById("send").disabled = true; document.getElementById("close").disabled = true; } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常 window.onbeforeunload = function() { closeWebSocket(); } } else { alert('当前浏览器 Not support websocket'); } } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '
'; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } //发送消息 function send() { var content = document.getElementById('text').value; websocket.send(content); } script> html>
项目演示
-
访问meeting-create.html进入主持人界面，点击创建会议，生成会议邀请码，并显示会议连接成功，界面如下：
 -
访问meeting-join.html进入观众界面，并通过上面的邀请码加入会议，界面如下：
-
此时双方就可以互相发送消息，主持人离开会议，则所有人退出，观众离开，不影响会议进行。
- 具体代码地址：https://gitee.com/yehx/websocket-meeting
总结
WebSocket作为一个双通道的协议，颠覆了传统的Client请求Server这种单向通道的模式。由于WebSocket的兴起，Web领域的实时推送技术也被广泛使用，可以简单实现让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。