浅析Node.js实现WebSocket的数据接收与发送

什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器端之间可以进行实时数据交换和数据推送而无需采取轮询方式，从而减少了网络流量和延迟。

WebSocket的实现过程

从客户端到服务器

客户端和服务器握手建立连接，此时会发送HTTP header（包括ws协议头），告知服务器要进行协议升级，升级成WebSocket协议。
服务器端回复HTTP header，告知客户端连接已建立并设置好WebSocket协议。
连接建立成功后，客户端和服务器端通过底层的TCP/IP协议进行双向通信，这种通信是异步的，能发送和接收数据（文本或二进制）

从服务器到客户端

服务器端处理客户端发送的请求，准备数据并进行数据编码，发送给客户端。
客户端接收到服务器端的消息，进行解码，得到数据。如果需要，再交由后续的应用层进行处理和展示。

Node.js实现WebSocket

客户端实现

如果是在Web环境下，可以直接使用WebSocket API，创建WebSocket连接：

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

这里创建了一个WebSocket对象，并连接到node.js服务器上。连接地址为ws://localhost:3000，即本地服务器的3000端口。

配置连接的监听器，接受服务器端返回的消息：

socket.addEventListener('message', function (event) {
   console.log('Message from server: ', event.data);
});

这里可以处理在服务器端发送的消息。

发送消息的方法：

socket.send('Hello Server!');

向服务器端发送消息的时候，可以直接调用send方法。

服务器端实现

服务器端首先需要安装websocket库：

npm install ws

使用ws模块创建WebSocket服务器：

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

这里创建一个WebSocket.Server实例，并指定端口为3000。

接下来需要监听客户端连接的事件：

wss.on('connection', function connection(ws) {
  console.log('Client connected');

  ws.on('message', function incoming(data) {
    console.log('received from client:', data);
  });

  ws.send('Hello Client!');
});

这里使用on方法监听客户端连接事件，当连接建立时，会把一个WebSocket对象作为参数传入connection事件回调函数中，通过这个对象可以实现与客户端的通信。

可以使用send方法向客户端发送消息，通过监听message事件接收客户端发送的消息。

实例1：聊天室

下面将使用上述WebSocket实现方法和Node.js express框架，搭建一个简单的聊天室。

1. 客户端

在HTML文件中创建一个连接到服务器的WebSocket对象，并实现数据接收和发送：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
</head>
<body>
    <input type="text" id="inputMsg" placeholder="Your message">
    <button onClick="sendMessage()">Send</button>
    <ul id="messageList"></ul>
</body>
<script>
    var socket = new WebSocket('ws://localhost:3001');

    socket.addEventListener('message', function (event) {
        console.log('Message from server: ', event.data);
        showMessage(event.data);
    });

    function sendMessage(){
        var inputMsgElement = document.getElementById('inputMsg');
        var message = inputMsgElement.value;
        inputMsgElement.value = "";
        socket.send(message);
    }

    function showMessage(message){
        var ulElement = document.getElementById('messageList');
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(message));
        ulElement.appendChild(li);
    }
</script>
</html>

这里的sendMessage方法将会把用户输入的消息发送给后端服务器。

2. 服务器端

使用express框架创建一个http服务器，然后在服务器端实现WebSocket的连接：

const express = require('express');
const WebSocket = require('ws');
const app = express();
const server = app.listen(3001, () => console.log('Server listening on port 3001!'));
const wss = new WebSocket.Server({ server });

app.use(express.static('public'));

wss.on('connection', function connection(ws) {
  console.log('Client connected');

  ws.on('message', function incoming(data) {
    console.log('received from client:', data);
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

这里的逻辑比较简单，当WebSocket连接建立起来时后端服务器会收到来自前端的请求，将消息广播给所有与服务器连接的客户端，每个连接客户端都会收到消息。

实例2：实时数据更新

在Web开发中，常用的的实时数据更新方案是轮询，但轮询的效果并不理想。这时可以用WebSocket实现实时数据更新。

1. 客户端

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
</head>
<body>
    <p id="data"></p>
    <script>
        const socket = new WebSocket('ws://localhost:3002');
        socket.addEventListener('message', function (event) {
          const data = JSON.parse(event.data);
          document.getElementById('data').innerHTML = data.temperature;
        }); 
    </script>
</body>
</html>

客户端会每隔一段时间向服务器发送请求，在数据更新的时候，服务器会向客户端发起推送。

2. 服务器端

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('WebSocket connection established.');

  setInterval(function () {
    const data = {
      temperature: Math.round(Math.random() * 50 + 273)
    };
    ws.send(JSON.stringify(data));
  }, 1000);
});

这里使用setInterval模拟实时更新，并使用JSON格式发送数据。

总结

通过本文的介绍，我们了解到了WebSocket的实现流程以及使用Node.js实现WebSocket的方法。WebSocket非常适合实现需要实时数据推送的Web应用，例如聊天室、实时数据更新等，使用起来非常方便。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅析nodejs实现Websocket的数据接收与发送 - Python技术站

浅析nodejs实现Websocket的数据接收与发送

浅析Node.js实现WebSocket的数据接收与发送

什么是WebSocket

WebSocket的实现过程

Node.js实现WebSocket

客户端实现

服务器端实现

实例1：聊天室

1. 客户端

2. 服务器端

实例2：实时数据更新

1. 客户端

2. 服务器端

总结

相关文章