WebSocket原理与实践

开题思考：如何实现客户端及时获取服务端数据？

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<String, Object> createMeeting() {
          int meetingId = id.incrementAndGet();
          String randStr = RandomStringUtils.random(6, true, true);
          SystemCache.idRandStrMap.put(meetingId, randStr);
          Map<String, Object> meetingVO = new HashMap<>();
          meetingVO.put("id", meetingId);
          meetingVO.put("randStr", randStr);
          return meetingVO;
      }
  }

• 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<String, Object> attributes) throws Exception {
          if (request instanceof ServletServerHttpRequest) {
              ServletServerHttpRequest serverHttpRequest = (ServletServerHttpRequest) request;
              String randStr = serverHttpRequest.getServletRequest().getParameter("randStr");
              String role = serverHttpRequest.getServletRequest().getParameter("role");
              if (StringUtils.isNotBlank(randStr)) {
                  attributes.put("randStr", randStr);
              }
              if (StringUtils.isNotBlank(role)) {
                  attributes.put("role", role);
              }
          }
          return true;
      }
  
     @Override
     public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler,
          Exception exception) {
     }
  }

• MeetingWebSocketHandler（websocket处理器，用于接受客户端发送各种类型数据，主要分为数据帧和控制帧）

  @Service
  public class MeetingWebSocketHandler extends TextWebSocketHandler {
  
      private static final Log LOG = LogFactory.getLog(MeetingWebSocketHandler.class);
      // 会议id和wsSession列表
      private static final ConcurrentHashMap<Integer, CopyOnWriteArraySet<WebSocketSession>> meetingWsSeesionMap = new ConcurrentHashMap<>();
  
      @Override
      public void afterConnectionEstablished(WebSocketSession session) throws Exception {
          LOG.info("spring websocket成功建立连接...");
          int meetingId = getMeetingId(session);
          if (meetingId <= 0) {
              singleMessage(session, new TextMessage("会议不存在!"));
              session.close();
          }
          // 如果该会议已存在，则直接加入
          if (meetingWsSeesionMap.containsKey(meetingId)) {
              CopyOnWriteArraySet<WebSocketSession> webSocketSessions = meetingWsSeesionMap.get(meetingId);
              webSocketSessions.add(session);
          }
          // 如果不存在，则新建
          else {
              CopyOnWriteArraySet<WebSocketSession> 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<WebSocketSession> 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<WebSocketSession> 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<Integer, String> idRandStrMap = new ConcurrentHashMap<>();
  
      public static int getMeetingIdByRandStr(String randStr) {
          int meetingId = 0;
          for (Map.Entry<Integer, String> entry : idRandStrMap.entrySet()) {
              if (randStr.equals(entry.getValue())) {
                  meetingId = entry.getKey();
              }
          }
          return meetingId;
      }
  }

前端相关代码

• 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 + '<br/>';
      }
  
      //关闭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("<p>会议邀请码：" + randStr + "</p>");
              $("#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 + '<br/>';
      }
  
      //关闭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等。