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等。

posted @ 2018-07-02 10:10 yehx 阅读(432) 评论(0) 编辑收藏举报

刷新页面返回顶部

一行代码、一个梦想

还记得你曾经的梦想吗？