Node.js WebSocket服务端和客户端

HTTP协议的问题

HTTP协议有两大特点：

• 无状态的：不保存之前请求的数据。
• 被动的： 服务器被动的接受客户端的请求。

所以，HTTP协议只适用于向网页这种情况，不适用于聊天这种情况，因为聊天需要服务器和客户端保持长时间的连接，且要让服务器可以主动向客户端发送数据。

虽然有些方法可以让HTTP协议实现聊天功能，就是轮询。客户端每隔一段时间（例如1秒中）就发送一次请求，看有没有新的消息，这种方式有点取巧，不够直接。

为了实现长连接和双向通信，WebSocket标准应运而生，目前大多数浏览器都能很好的支持WebSocket。

WebSocket服务端

我们使用Nodejs的ws模块实现WebSocket服务器。首先安装ws模块：

npm i ws

然后编写server.js：

const WebSocket = require('ws')

const wss = new WebSocket.Server({port: 3000})

// 监听connection事件
wss.on('connection', client => {
        
         // 监听message事件
    client.on('message', msg => {
        console.log(`来自客户端${ws}的消息:${msg}`)
        client.send('来自服务器的消息:本条消息已送到服务器')
    })
})

首先导入ws模块，使用Server类指定端口即可开启一个WebSocket Server，一般命名为wss。

wss有一个connection事件，表示监听客户端的连接，当有新的客户端连接时触发。事件会传入一个参数，如本例中的ws，表示特定的客户端对象。

每个客户端对象都有一个message事件，表示监听客户端的消息。事件会传入一个参数，如本例中的msg，表示该客户端发过来的消息。

客户端对象还有一个send()方法，表示发送消息给该客户端。

wss对象还有一个clients成员，这是一个类数组对象，表示所有的客户端对象。利用这个类数组对象的forEach()方法可以实现广播功能，即发消息给所有的客户端，进而实现群聊的功能。

运行 node server.js 就可以开启一个简单的WebSocket服务器。

WebSocket客户端

WebSocket客户端使用浏览器实现，示例如下：

<input id="input" />
<button onclick="send()">发送</button>
<div id="message"></div>

<script>

    const client = new WebSocket('ws://localhost:3000')

    // 输入框元素对象
    const input = document.getElementById('input')
        
         // 发送消息给服务端
    function send() {
        client.send(input.value)
    }

    // 监听message，接收服务器的消息
    client.onmessage = msg => {
        document.getElementById("message").innerHTML += msg.data+'<br />'
    }

</script>

使用new WebSocket()传入ws协议地址加端口即可连接ws服务器，前提是ws服务器已开启。

示例中的ws是客户端对象，ws.send()表示发送数据到服务器。ws.onmessage监听服务器的消息，并指定如何处理消息。