WebSocket

最新推荐文章于 2024-11-13 23:29:03 发布

酒未醒～

最新推荐文章于 2024-11-13 23:29:03 发布

阅读量113

点赞数

本文链接：https://blog.youkuaiyun.com/qq_43778787/article/details/108344515

版权

WebSocket

参考文档：https://www.cnblogs.com/nnngu/p/9347635.html

参考视频：https://www.bilibili.com/video/BV124411N7uo

WebSocket 是基于 HTTP 协议的，或者说借用了 HTTP 协议来完成一部分握手。它必须依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。即：websocket分为握手和数据传输阶段，即进行了HTTP握手 + 双工的TCP连接。

案例

server.js

const WebSocketServer = require('websocket').server
const http = require('http')

const server = http.createServer()
server.listen('3010',()=>{
    console.log('端口3010的服务已启动')
})

//存储所有终端的连接
let connectList = []

//创建websocket服务对象
const wsServer = new WebSocketServer({httpServer:server});

//监听连接请求，建立连接
//webSocketRequest 当前请求
wsServer.on('request',(webSocketRequest)=>{
    //当前连接 回话,第一个参数是协议，第二个是接受来源
    const connect = webSocketRequest.accept(null,'accepted-origin')

    //将连接添加到终端
    connectList.push(connect)

    //接受连接后，向客户端发送数据
   /*  setInterval(()=>{
        connect.send('Hello,我是服务端')
    },1000) */
    //监听客户端发送的数据
    connect.on('message',(msg)=>{
        if(msg.type === 'utf8'){
            //给每一个连接发送数据
            connectList.forEach((item)=>{
                item.send(msg.utf8Data)
            })
        }
    })

    connect.on('close',(reasonCode,description)=>{
       
        const index = connectList.indexOf(connect)
        //删除
        connectList.splice(index,1)
        console.log('有一个连接断开了')
    })
})

多终端multiply_client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="content">

    </ul>
    <input type="text" id="msg" />
    <button onclick="send()">发送</button>

    <script>
        var ws = new WebSocket('ws://localhost:3010')
        var inputMsg = document.getElementById('msg')
        var contentNode = document.getElementById('content')
        //接收信息
        ws.onmessage = (msg)=>{
            contentNode.innerHTML += '<li>'+msg.data+'</li>'
        }
        //发送消息
        function send(){
            ws.send(inputMsg.value)
        }
    </script>
</body>
</html>