WebSocket使用案例

た入场券 2022-10-08 05:49 245阅读 0赞

# WebSocket使用案例 #

--------------------

## 目录 ##

1.  web客户端 websocket
2.  nodejs服务器端websocket
3.  websocket案例
4.  对于WebRTC项目而言，nodejs主要是实现信令服务器的功能，客户端和服务器端的交互我们选择websocket作为通信协议。

--------------------

### 1. web客户端 websocket ###

1.  WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
2.  WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocketAPI 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
3.  在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
4.  现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
5.  HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70]
6.  浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过TCP 连接直接交换数据。
7.  当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
8.  以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

1.  以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议

#### 1. WebSocket 属性 ####

1.  以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 1]

#### 2. WebSocket 事件 ####

1.  以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 2]

#### 3. WebSocket 方法 ####

1.  以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：  
    ![在这里插入图片描述][20210620174228879.png]
2.  为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

--------------------

### 2. nodejs服务器端websocket ###

1.  Nodejs教程：[添加链接描述][Link 1]
2.  简单的说 Node.js 就是运行在服务端的 JavaScript。
3.  服务器端使用websocket需要安装nodejswebsocket

cd 工程目录
    # 此刻我们需要执行命令：
    sudo npm init
    #创建package.json文件，系统会提示相关配置，也可以使用命令：
    sudo npm init ‐y
    sudo npm install nodejs‐websocket

1.  官方参考：[https://www.npmjs.com/package/nodejswebsocket][https_www.npmjs.com_package_nodejswebsocket]
2.  我们只要关注：  
    （1）如何创建websocket服务器，通过createServer和listen接口；  
    （2）如何判断有新的连接进来，createServer的回调函数判断；  
    （3）如何判断关闭事件，通过on(“close”, callback) 事件的回调函数；  
    （4）如何判断接收到数据，通过on(“text”, callkback)事件的回调函数；  
    （5）如何判断接收异常，通过on(“error”, callkback)事件的回调函数；  
    （6）如何主动发送数据，调用sendText
3.  代码示例：

var ws = require("nodejs‐websocket")
    // Scream server example: "hi" ‐> "HI!!!"
    var server = ws.createServer(function (conn) {
        
        console.log("New connection")
        conn.on("text", function (str) {
         // 收到数据的响应
            console.log("Received " + str)
            conn.sendText(str.toUpperCase() + "!!!") // 发送
        })
        conn.on("close", function (code, reason) {
         // 关闭时的响应
            console.log("Connection closed")
        })
        conn.on("error", function (err) {
         // 出错
            console.log("error:" + err);
        });
    }).listen(8001)

--------------------

### 3. websocket案例 ###

1.  消息类型分为三种：
    
    1.  enter：新人进入 （蓝色字体显示）
    2.  message：普通聊天信息 （黑色字体显示）
    3.  leave：有人离开 （红色字体显示）
2.  服务器在收到某个客户端的消息（message+enter+leave），然后将其广播给所有的客户端（包括发送者）。

#### 1. 客户端代码 ####

<html>
    <head>
        <meta charset="UTF-8">
        <title>webrtc demo</title>
    </head>
    
    <body>
        <h1>Websocket简易聊天</h1>
        <div id="app">
            <input id="sendMsg" type="text" />
            <button id="submitBtn">发送</button>
        </div>
    </body>
    <script type="text/javascript">
        //在页面显示聊天内容
        function showMessage(str, type) {
        
            var div = document.createElement("div");
            div.innerHTML = str;
            if (type == "enter") {
        
                div.style.color = "blue";
            } else if (type == "leave") {
        
                div.style.color = "red";
            }
            document.body.appendChild(div);
        }
    
        //新建一个websocket
        var websocket = new WebSocket("ws://127.0.0.1:8099");
        //打开websocket连接
        websocket.onopen = function () {
        
            console.log("已经连上服务器----");
            document.getElementById("submitBtn").onclick = function () {
        
                var txt = document.getElementById("sendMsg").value;
                if (txt) {
        
                    //向服务器发送数据
                    websocket.send(txt);
                }
            };
        };
        //关闭连接
        websocket.onclose = function () {
        
            console.log("websocket close");
        };
        //接收服务器返回的数据
        websocket.onmessage = function (e) {
        
            var mes = JSON.parse(e.data);   // json格式
            showMessage(mes.data, mes.type);
        };
    </script>
    
    </html>

#### 2. 服务端代码 ####

#### 3. 效果展示 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 3]

#### 4. websocket部署在阿里云连接不上？ ####

1.  测试时，将服务端代码部署在阿里云，发送访问不通，需要配置网络端口，弄了好久才发现…  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70]: /images/20221005/490e5cba78c14ec588ccfc4a7d026bdb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 1]: /images/20221005/043b38a256f54889849fab6b42f5fce0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 2]: /images/20221005/e585bcb2f430447f9d56cc2df914aa97.png
[20210620174228879.png]: /images/20221005/ae565d77805e4d6cba97410ef3b85b2f.png
[Link 1]: https://www.runoob.com/nodejs/nodejs%C2%ADtutorial.html
[https_www.npmjs.com_package_nodejswebsocket]: https://www.npmjs.com/package/nodejs%C2%ADwebsocket
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 3]: /images/20221005/3a43636c1ced41c48f7b239d6e3e0a0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTkxMDY5NA_size_16_color_FFFFFF_t_70 4]: /images/20221005/b278290fb75541ec85b15469f402dd0b.png