WebSockets原理，握手和代码实现！用Socket.io制作实时聊天室

最新推荐文章于 2025-04-01 11:59:59 发布

前端大白菜123

最新推荐文章于 2025-04-01 11:59:59 发布

阅读量1.9k

点赞数 19

文章标签： javascript node.js express

本文链接：https://blog.youkuaiyun.com/qq_40296909/article/details/129551292

版权

WebSockets

原理

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅

客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输

从上图可见，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据

而在websocket出现之前，开发实时web应用的方式为轮询

不停地向服务器发送 HTTP 请求，问有没有数据，有数据的话服务器就用响应报文回应。如果轮询的频率比较高，那么就可以近似地实现“实时通信”的效果

轮询的缺点也很明显，反复发送无效查询请求耗费了大量的带宽和 CPU资源

握手过程

WebSocket也要有一个握手过程，然后才能正式收发数据

客户端发送数据格式如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

Connection：必须设置Upgrade，表示客户端希望连接升级

Upgrade：必须设置Websocket，表示希望升级到Websocket协议

Sec-WebSocket-Key：客户端发送的一个 base64 编码的密文，用于简单的认证秘钥。要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept应答，否则客户端会抛出错误，并关闭连接

Sec-WebSocket-Version ：表示支持的Websocket版本

服务端返回的数据格式：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chat

HTTP/1.1 101 Switching Protocols：表示服务端接受 WebSocket 协议的客户端连接

Sec-WebSocket-Accep：验证客户端请求报文，同样也是为了防止误连接。具体做法是把请求头里“Sec-WebSocket-Key”的值，加上一个专用的 UUID，再计算摘要

代码实现

基于JavaScript 和 node.js简单实现webscokets 的交互过程：

server.js 如下：

const WebSockets = require('ws')
const wss = new WebSockets.Server({port: 3000})

wss.on('connection', ws => {
    console.log('有个帅哥连接进来了' + ws);

    ws.on('close', () => {
        console.log('帅哥走了！呜呜呜');
    })

    ws.on('message', (data) => {
        ws.send(data + '举头望明月，低头及痔疮')
    })
})

index.html 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const ws = new WebSocket('ws://localhost:3000')

        ws.addEventListener('open', () => {
            console.log('连接数服务器了！');

            ws.send('床前民月光，疑是地上霜。')
        })

        ws.addEventListener('message', ({data}) => {
            console.log(data);
        })
    </script>
</body>
</html>

在终端上使用node 指令运行 server.js ，并且Open with Live Server 打开index.html：

PS E:\project\Study\WebSockets> node .\server.js
有个帅哥连接进来了

打开浏览器控制台：

关闭刚刚打开的浏览器窗口，即关闭连接：

PS E:\project\Study\WebSockets> node .\server.js
有个帅哥连接进来了
帅哥走了！呜呜呜

至此，WebSockets 的简单实现已完成。

Socket.io 实现实时聊天

Socket.IO 由两部分组成：

一个服务端用于集成 (或挂载) 到 Node.JS HTTP 服务器： socket.io

一个加载到浏览器中的客户端： socket.io-client

使用node 安装 express 和 socket.io

npm i express socket.io

server.js 如下：

const app = require('express')()
const server = require('http').createServer(app)

const { Server } = require('socket.io')
const io = new Server(server)

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html')
})

// connection 特殊事件，用以监听是否连接成功，接收 socket 
io.on('connection', socket => {
    console.log('有位美女进入了聊天室');
    // 捕获客户端发送的 chat message 事件
    socket.on('chat message', (msg) => {
        // 广播 - 获取到客户端发送的数据后，服务端发送数据给所有客户端
        io.emit('allMsg', msg)
    })

    // 与 connection 一样，disconnection 也是一个特殊事件，用以监听是否断开连接
    socket.on('disconnect', () => {
        console.log('美女离开了');
    })
})

server.listen('3000', () => '服务器开启了')

index.html 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text">
        <button>发送</button>
    </form>
    <ul></ul>

    <!-- 这样就加载了 socket.io-client。 socket.io-client 暴露了一个 io 全局变量，然后连接服务器。 -->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io() // 调用 io 函数时没有指定任何 url，因为他默认将尝试连接到提供当前页面的主机
        const form = document.querySelector('form')
        const input = document.querySelector('input')
        const ul = document.querySelector('ul')

        form.addEventListener('submit', e => {
            e.preventDefault()
            if(input.value) {
                // 向服务端发送 chat message 事件，同时传输数据
                socket.emit('chat message', input.value)
                input.value = ''
            }
        })

        // 捕获 allMsg 事件，并将消息添加到页面中
        socket.on('allMsg', msg => {
            const li = document.createElement('li')
            li.textContent = msg
            ul.appendChild(li)
        })
    </script>
</body>
</html>

使用node 运行 server.js，并且 Open with Live Server 打开index.html:

PS E:\project\Study\socket.io> node .\server.js   
有位美女进入了聊天室

打开多个窗口模拟聊天：

至此，socket.io 实现的聊天功能已完成。