分布式-- WebSocket 全双工通讯-阿里云开发者社区

1. WebSocket

1). 背景

B/S结构的软件项目中有时客户端需要实时的获得服务器消息，但默认HTTP协议只支持请求响应模式，这样做可以简化Web服务器，减少服务器的负担，加快响应速度，因为服务器不需要与客户端长时间建立一个通信链接，但不容易直接完成实时的消息推送功能，如聊天室、后台信息提示、实时更新数据等功能，但通过polling、Long polling、长连接、Flash Socket以及HTML5中定义的WebSocket能完成该功能需要。

2). OSI 模型与 TCP/IP下载 pdf

图1.png

3). Socket简介

Socket又称"套接字"，应用程序通常通过"套接字"向网络发出请求或者应答网络请求。Socket的英文原义是“孔”或“插座”，作为UNIX的进程通信机制。Socket可以实现应用程序间网络通信。

图2.png

I. Socket可以使用TCP/IP协议或UDP协议。
TCP/IP协议

TCP/IP协议是目前应用最为广泛的协议，是构成Internet国际互联网协议的最为基础的协议,由TCP和IP协议组成:
=> TCP协议:面向连接的、可靠的、基于字节流的传输层通信协议，负责数据的可靠性传输的问题。
=> IP协议:用于报文交换网络的一种面向数据的协议，主要负责给每台网络设备一个网络地址，保证数据传输到正确的目的地。
UDP协议
UDP特点：无连接、不可靠、基于报文的传输层协议，优点是发送后不用管，速度比TCP快。

II. B/S架构的系统多使用HTTP协议，HTTP协议的特点（底层通信使用Socket）：

无状态协议
用于通过 Internet 发送请求消息和响应消息
使用端口接收和发送消息，默认为80端口

图3.png

4).双向通信与消息推送

轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
�优点：后端程序编写比较容易。
�缺点：请求中有大半是无用，浪费带宽和服务器资源。
�实例：适于小型应用。
长轮询：客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
�优点：在无消息的情况下不会频繁的请求，耗费资小。
�缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。 Comet异步的ashx，
�实例：WebQQ、Hi网页版、Facebook IM。
长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。
�优点：消息即时到达，不发无用请求；管理起来也相对便。
�缺点：服务器维护一个长连接会增加开销。
�实例：Gmail聊天
Flash Socket：在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信，JavaScript在收到服务器端传送的信息后控制页面的显示。
�优点：实现真正的即时通信，而不是伪即时。
�缺点：客户端必须安装Flash插件；非HTTP协议，无法自动穿越防火墙。
�实例：网络互动游戏。
Websocket: WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
�特点: 事件驱动、异步、使用ws或者wss协议的客户端socket、能够实现真正意义上的推送功能。
�缺点：少部分浏览器不支持，浏览器支持的程度与方式有区别。

图4.png

2. 示例

1). 客户端

websocket允许通过JavaScript建立与远程服务器的连接，从而实现客户端与服务器间双向的通信。在websocket中有两个方法：　　
　　　　1、send() 向远程服务器发送数据
　　　　2、close() 关闭该websocket链接
　　websocket监听函数：
　　　　1、onopen 当网络连接建立时触发该事件
　　　　2、onerror 当网络发生错误时触发该事件
　　　　3、onclose 当websocket被关闭时触发该事件
　　　　4、onmessage 当websocket接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件。msg.data
　　websocket还定义了一个readyState属性，这个属性可以返回websocket所处的状态：
　　　　1、CONNECTING(0) websocket正尝试与服务器建立连接
　　　　2、OPEN(1) websocket与服务器已经建立连接
　　　　3、CLOSING(2) websocket正在关闭与服务器的连接
　　　　4、CLOSED(3) websocket已经关闭了与服务器的连接
　　websocket的url开头是ws，如果需要ssl加密可以使用wss，当我们调用websocket的构造方法构建一个websocket对象（new WebSocket(url)）的之后，就可以进行即时通信了。

2). 创建Web工程

I. 创建chat.html页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>趣味聊天室</title>
        <style type="text/css">
            /* 处理浏览器适配问题 */
            * {margin: 0;padding: 0;}
            a {text-decoration: none;}
            body {font-size: 14px;font-family: "微软雅黑";}
            .wrap {width: 700px; position: relative; top: 50px;left: calc(50% - 350px);display: flex;flex-direction:column;background: #F8F8F9;border-radius: 8px;user-select:none;-webkit-user-select:none;}
            
            /* header start */
            .wrap .header {height: 80px;background: linear-gradient(200deg,#d6d1f1,#EE60E1);text-align: center;line-height: 80px;border-radius: 8px 8px 0 0;cursor: move;}
            .wrap .header span {font-size: 28px;letter-spacing: 2px;color: #f1f1f1;}
            .wrap .header #close_btn {position: absolute;right: 0px;top: 0px;width: 20px;height: 20px;background: url(img/close.png) no-repeat center;border-radius: 8px;}
            /* header end */
            
            /* main start */
            .wrap .main {display: flex;height: 300px;}
            
            /* left start */
            .wrap .left {width: 260px;border-right: 1px solid #e1e1e1;}
            .wrap .time {height: 30px;text-align: center;line-height: 30px;}
            .wrap .time .time_bg {width: 20px;height: 20px;display: inline-block;vertical-align: middle;cursor: pointer;}
            .wrap .time span {font-size: 14px;vertical-align: middle;color: #4EA9E9;cursor: pointer;}
            .wrap .left .left_people a{height: 25px;text-align: center;line-height: 25px;margin-top: 3px;display: block;}
            /* left end */
            
            /* right start */
            .wrap .right {width: 700px;background: #f9f9f9;}
            .wrap .right .right_record {height: 260px;padding-bottom: 10px;overflow: auto;}
            .wrap .right .right_record .record_item {width: 600px;margin: 0 auto;}
            .wrap .right .right_record .record_item p {text-align: center; font-size: 13px;color: #9A9797;}
            .wrap .right .right_record .record_item .record_item_txt p {text-align: left;margin: 5px 0 0 10px;}
            .wrap .right .right_record .record_item .record_item_txt .avatar {margin-left: 5px; color: #AC4BFD;font-size: 12px;}
            .wrap .right .right_record .record_item .record_item_txt .txt {color: #f1f1f1;}
            .wrap .right .right_record .record_item .record_item_txt p span {border-radius: 10px; text-align: left;background: skyblue;padding: 3px 5px;font-size: 14px;color: #E833F6;}
            /* right end */
            
            /* content bottom start */
            .wrap .content {height: 140px;border-top: 1px solid #e1e1e1;display: flex;flex-direction:column;}
            .wrap .content .content_tool {height: 30px;border-bottom: 1px solid #e1e1e1;display: flex;line-height: 41px;}
            .wrap .content .content_tool div {margin-left: 20px;}
            .wrap .content .content_tool .bg {width: 20px;height: 20px;display: inline-block;cursor: pointer;}
            
            .wrap .content .content_text {height: 90px;padding: 5px;outline: none;}
            .wrap .content .content_btn {display: flex;justify-content:space-between;line-height: 30px;border-top: 1px solid #e1e1e1;}
            .wrap .content .content_btn .content_btn_text {font-size: 12px;letter-spacing: 1px;line-height: 35px;color: #7E7D7D;margin-left: 10px;}
            .wrap .content .content_btn .btns {width: 140px;display: flex;margin-top: 2px;}
            .wrap .content .btn_item {width: 80px;height: 25px;text-align: center;line-height: 25px;border: 1px solid #c1c1c1;color: #313333;cursor: pointer;margin-right: 5px;letter-spacing: 1px;border-radius: 4px;}
            /* content bottom end */            
        </style>
    </head>
    <body>
        <!-- <canvas id="dot"></canvas> -->
        <div class="wrap">
            <div class="header">
                <span>趣味聊天室</span>
                <a href="javascript:void(0)" id="close_btn"></a>
            </div>
            <div class="main">
                <!-- left -->
                <!-- right -->
                <div class="right">
                    <div class="time">
                        <i class="time_bg" style="background: url(img/clock.png) no-repeat;"></i>
                        <span>聊天记录</span>
                    </div>
                    <!-- 聊天记录 -->
                    <div class="right_record" id="outputMessage"></div>
                </div>
            </div>
            
            <!-- content tool/txt -->
            <div class="content">
                <div class="content_tool">
                    <div class="tool_font">
                        <i class="bg" style="background: url(img/font.png) no-repeat;"></i>
                    </div>
                    <div class="tool_emjo">
                        <i class="bg" style="background: url(img/emjo.png) no-repeat;"></i>
                    </div>
                </div>
                
                <div class="content_text" contenteditable="true" id="inputMessage"></div>
                
                <div class="content_btn">
                    <div class="content_btn_text"><i>自己的DIY聊天室</i></div>
                    <div class="btns">
                        <div class="send btn_item" onclick="getMessage();">
                            <span>发送</span><span>(S)</span>
                        </div>
                        <div class="close btn_item">
                            <span>关闭</span><span>(C)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 引入jQuery -->
        <!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> -->
        <script type="text/javascript">
            // 定义服务器地址和请求类型
            var wsUrl = "ws://localhost:8080/WebSocketTest/chatServer";
            // 客户端与服务建立连接，连接成功后，发出ws.onopen事件
            var ws = new WebSocket(wsUrl);
            /** 
            * 连接成功后，提示浏览器客户端输入昵称 
            */
            ws.onopen = function() {
                var userName = prompt("请给自己取一个名字：");
                // 发送用户名
                ws.send(userName);
            }
            
            /**
            * 客户端收到服务器发送的消息
            */
            ws.onmessage = function(message) {
                // 获取以后，在客户端显示
                outputMessage.innerHTML = outputMessage.innerHTML + message.data;
                // 获取outputMessage盒子
                var msg = document.getElementById("outputMessage");
                // 差值，溢出的高度 - 可视的高度
                var distance = msg.scrollHeight - msg.offsetHeight;
                // 将差值赋值给滚动条的高度
                msg.scrollTop = distance;
            }
            
            /**
            * 获取某个用户输入的聊天内容，并发送给服务端，让服务端广播给所有人
            */
            function getMessage() {
                // 获取输入框信息
                var inputMessage = document.getElementById("inputMessage").innerText;
                // 判断内容是否为空
                if (typeof(inputMessage) == "undefined") {
                    alert("请输入您要发送的信息");
                } else {
                    // 获取到输入的消息，发送给服务端，并广播给所有用户
                    ws.send(inputMessage);
                    document.getElementById("inputMessage").innerText = "";
                }
            }
            
            /**
            * 当关闭页面的时候，或者用户退出的时候，会执行ws.close()方法
            */
            window.onbeforeunload = function() {
                ws.close();
            }
            
            /**
            * 回车键发送消息
            */
            document.onkeyup = function(e) {
                if (e.keyCode == 13) {
                    getMessage();
                }
            }
            
        </script>
    </body>
</html>

II. 图片资源

图5.png

III. 目录结构

图6.png

3). 服务器ChatServer代码

/**
 * 趣味聊天的服务端程序
 * 
 * @author mazaiting
 */
// 声明WebSocket服务器的地址
@ServerEndpoint("/chatServer")
public class ChatServer {
    /** 是否是第一次进入 */
    private boolean isFirstFlag = true;
    private Session session;
    /** 用户名 */
    private String userName;
    /**
     * 记录此次聊天室的服务端有多少个连接 key代表此次客户端的Session ID，value代表此次连接对象
     */
    private static final HashMap<String, Object> connectMap = new HashMap<>();
    /**
     * 保存所有用户的昵称信息 key是Session ID，value才是用户名
     */
    private static final HashMap<String, String> userMap = new HashMap<>();

    /**
     * 服务端收到客户端连接请求，连接成功后会执行此方法
     * 
     * @param session
     */
    @OnOpen
    public void start(Session session) {
        this.session = session;
        connectMap.put(session.toString(), this);
    }

    /**
     * 发送消息
     * 
     * @param clientMessage
     *            消息/用户名
     * @param session
     *            会话
     */
    @OnMessage
    public void chat(String clientMessage, Session session) {
        // 消息
        String message;
        // 判断是否为第一次发送消息
        if (isFirstFlag) {
            // 用户名赋值
            this.userName = clientMessage;
            // 将新进来的用户保存到用户map
            userMap.put(session.getId(), userName);
            // 构造发送给客户端的提示信息
            message = htmlMessage("系统消息", userName + "进入聊天室");
            // 输入昵称后，代表isFirstFlag=false
            isFirstFlag = false;
        } else {
            // 构造发送给客户端的提示信息
            message = htmlMessage(userMap.get(session.getId()), clientMessage);
        }
        sendMessageForAll(message);
    }

    /**
     * ws.close()方法调用后，会触发后台的标注OnClose方法
     * 
     * @param session
     */
    @OnClose
    public void close(Session session) {
        // 当某个用户退出时，对其他用户进行广播
        String message = htmlMessage("系统消息", userMap.get(session.getId()) + "退出了聊天室");
        // 用户map移除
        userMap.remove(session.getId());
        // 链接map移除
        connectMap.remove(session.getId());
        sendMessageForAll(message);
    }

    /**
     * 格式化消息
     * @param userName 用戶名
     * @param message 消息
     * @return 消息
     */
    private String htmlMessage(String userName, String message) {
        StringBuffer messageBuffer = new StringBuffer();
        SimpleDateFormat sFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        messageBuffer.append("<div class='record_item'>");
        messageBuffer.append("<p class='record_item_time'>");
        messageBuffer.append("<span>" + sFormat.format(new Date()) + "</span>");
        messageBuffer.append("</p>");
        messageBuffer.append("<div class='record_item_txt'>");
        messageBuffer.append("<span class='avatar'>" + userName + "</span>");
        messageBuffer.append("<p>");
        messageBuffer.append("<span class='txt'>" + message + "</span>");
        messageBuffer.append("</p>");
        messageBuffer.append("</div>");
        messageBuffer.append("</div>");
        return messageBuffer.toString();
    }

    /**
     * 为所有用户发送消息
     * 
     * @param message
     *            消息
     */
    private void sendMessageForAll(String message) {
        // 当前对象
        ChatServer client = null;
        // 将消息广播给所有人
        for (String connectKey : connectMap.keySet()) {
            // 获取客户端
            client = (ChatServer) connectMap.get(connectKey);
            // 给对应的web端发送一个文本信息
            try {
                client.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
            ;
        }
    }
}

4). 服务端注解

@ServerEndpoint: 绑定服务器地址的注解方法
@OnOpen: WebSocket连接执行的注解方法
@OnMessage: 发送消息时执行的方法
@OnClose: 关闭时执行的方法

5). 测试

图7.png

3. 开源框架

1). 开源Java消息推送框架 Pushlet

Pushlet 是一个开源的 Comet 框架,Pushlet 使用了观察者模型：客户端发送请求，订阅感兴趣的事件；服务器端为每个客户端分配一个会话 ID 作为标记，事件源会把新产生的事件以多播的方式发送到订阅者的事件队列里。
Pushlet是一种comet实现：在Servlet机制下，数据从server端的Java对象直接推送（push）到（动态）HTML页面，而无需任何Javaapplet或者插件的帮助。它使server端可以周期性地更新client的web页面，这与传统的request/response方式相悖。浏览器client为兼容JavaScript1.4版本以上的浏览器（如InternetExplorer、FireFox），并使用JavaScript/DynamicHTML特性。而底层实现使用一个servlet通过Http连接到JavaScript所在的浏览器，并将数据推送到后者。

分布式-- WebSocket 全双工通讯