React 函数组件配置 websocket 封装【长链接】

置顶九层嵌套 for 循环

已于 2024-02-28 13:43:50 修改

阅读量1k

点赞数 10

文章标签： react.js websocket javascript

于 2024-02-28 13:39:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_72099243/article/details/136343954

版权

本文介绍了如何在React应用中封装WebSocket服务，包括创建WebSocket连接，处理open、message和close事件，以及发送和添加消息监听器。还提供了本地Node.js服务器作为测试案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket 封装示例

import { useEffect, useRef } from "react";

interface WebSocketService {
  send: (message: string) => void;
  addMessageListener: (listener: (message: string) => void) => void;
}

const useWebSocket = (url: string): WebSocketService => {
  const socketRef = useRef<WebSocket | null>(null);
  const messageListeners = useRef<((message: string) => void)[]>([]);

  useEffect(() => {
    const newSocket = new WebSocket(url);
    socketRef.current = newSocket;

    newSocket.addEventListener("open", () => {
      console.log("%c 【 Websocket 已建立连接! 】........  ", "color: green");
      newSocket.send("web 已连接!");
    });

    newSocket.addEventListener("message", (event) => {
      messageListeners.current.forEach((listener) => listener(event.data));
    });

    newSocket.addEventListener("close", () => {
      console.log("WebSocket连接已关闭");
    });

    return () => {
      newSocket.close();
    };
  }, [url]);

  const send = (message: string) => {
    if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
      socketRef.current.send(message);
    }
  };

  const addMessageListener = (listener: (message: string) => void) => {
    messageListeners.current.push(listener);
  };

  return { send, addMessageListener };
};

export default useWebSocket;

调用示例

import useWebSocket from "@/components/Websocket/websocket";

const { send, addMessageListener } = useWebSocket("ws://localhost:3000");

 useEffect(() => {
    send(['首页已连接','/api/homePage/Interface']);
    // 添加消息监听器
    addMessageListener((message) => {
      console.log("收到消息：", message);
      if (message === "/api/Interface/userInfo") {
        setDataSource([
          {
            key: "1",
            name: nanoid(),
            age: nanoid(),
            address: nanoid(),
          },
          {
            key: "2",
            name: nanoid(),
            age: nanoid(),
            address: nanoid(),
          },
        ]);
      }
    });

    return () => {
      console.log("组件卸载，WebSocket 连接已关闭");
    };
  }, []);

此处消息监听可根据后端返来的具体字段数据做判定，重新调用接口更新页面数据 || 实现其它功能。

也可链接本地 node 做测试

代码如下：

const WebSocket = require('ws');
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('WebSocket Server\n');
});

const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  console.log('connect OK!');

  ws.on('message', (message) => {
    console.log('收到消息：', message);

    // 向客户端发送消息
    setInterval(() => {
       ws.send('/api/Interface/userInfo');
    }, 1000);
  });

  // 连接关闭时的回调
  ws.on('close', () => {
    console.log('客户端已断开连接');
  });
});

server.listen(3000, () => {
  console.log('WebSocket 服务器已启动在 http://localhost:3000');
});

打开终端运行 cnpm install xs , cnpm install nodemon

然后使用 nodemon xxx ( 你 nodejs 代码的文件 ) 我此处是叫：websocket.js

那么我开启就需要使用 nodemon websocket.js 即可打开 node 进行链接。

时小记，终有成。