带有 Node 和 React 的 Websocket - JavaScript

Websocket 是一种实时通信协议，允许客户端和服务器之间进行双向通信。本篇文章将介绍如何在 Node 和 React 中实现 Websocket 的功能。

版本依赖

需要 Node 14.x 或更高版本和 React 16.8 或更高版本。

在 Node 中使用 Websocket

使用 Node 中的 ws 模块可以很方便地实现 Websocket 功能。首先，安装依赖：

npm install ws

然后，创建一个 WebSocket 服务器：

const WebSocket = require('ws');

// 创建 WebSocket 服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接事件
wss.on('connection', (ws) => {
  console.log('Client connected');

  // 监听消息事件
  ws.on('message', (data) => {
    console.log(`Message from client: ${data}`);

    // 返回消息给客户端
    ws.send(`Hello, you said: ${data}`);
  });

  // 监听关闭事件
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

上面的代码创建一个 WebSocket 服务器，监听 8080 端口。当客户端连接服务器时，会触发 connection 事件，并创建一个 WebSocket 实例 ws，可以通过 ws 发送和接收消息。当客户端关闭连接时，会触发 close 事件。

在 React 中使用 Websocket

使用 React 中的 WebSocket 组件可以很方便地实现 Websocket 功能。首先，安装依赖：

npm install react-websocket

然后，在组件中使用 WebSocket 组件：

import React, { useState } from 'react';
import WebSocket from 'react-websocket';

function App() {
  const [message, setMessage] = useState('');

  const handleOpen = () => {
    console.log('WebSocket connected');
  }

  const handleMessage = (data) => {
    console.log(`Message from server: ${data}`);

    // 更新消息
    setMessage(data);
  }

  const handleClose = () => {
    console.log('WebSocket disconnected');
  }

  return (
    <div>
      <WebSocket
        url="ws://localhost:8080/"
        onOpen={handleOpen}
        onMessage={handleMessage}
        onClose={handleClose}
      />
      <p>{message}</p>
    </div>
  );
}

export default App;

上面的代码创建一个 WebSocket 连接，连接到 ws://localhost:8080/。当连接成功时，会触发 onOpen 回调函数；当接收到消息时，会触发 onMessage 回调函数；当连接关闭时，会触发 onClose 回调函数。在组件中可以通过 useState 存储和更新消息。