2、建立WebSocket连接

旧城等待， 2022-05-18 10:42 157阅读 0赞

1、安装WebSocket安装包

npm i nodejs-websocket --save

![70][]

2、创建如下目录

![70 1][]

app.js

/**
     * 服务端
     */
    
    /**
     * 1 将nodejs-websock包引进来
     */
    var ws = require('nodejs-websocket');
    
    /**
     * 2 创建一个WebSocket服务，建立TCP连接, 
     * conn就是连进来的连接
     * server 监听2333端口
     */
    var server = ws.createServer(function(conn){
    
        console.log('New connection'); // 表示新的连接进来了
    
    }).listen(2333);

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            /**
             * 这里我们创建一个WebSocket,里面填上服务端连接及端口号
             * ws 表示它的协议
             * 
             */
            var ws = new WebSocket('ws://localhost:2333');
            
        </script>
    </body>
    </html>

点击调试，启动调试，打开index.html页面

![70 2][]

打开控制台我们可以看到，点击ws我们可以看到

![70 3][]

从里我们看出来我们建立的是一个WebSocket连接，其实它是个TCP的连接。可以实现双向的全双工的通信。就是我们不需要特地给服务端发个请求，而服务端可以直接发，把数据推给前端。

[70]: /images/20220518/23a98e4570ab4b569380635145c734bb.png
[70 1]: /images/20220518/7ab5aed11a99438ebec277c7538fa92e.png
[70 2]: /images/20220518/d7cbcabb9a194e9fb8d0f406a0a3bb3f.png
[70 3]: /images/20220518/bc2eaaa84985400f959d5185f901200f.png