用Koa2和React Hooks实现后端和前端的持久的Socket连接

2024-01-07 03:22:54

在现代网络应用开发中，实时通信已成为一项必不可少的特性。通过使用WebSockets，开发人员可以建立持久的双向通信渠道，允许服务器和客户端在不重新加载页面的情况下交换数据。本文将指导您使用Koa2和React Hooks在后端和前端实现持久的Socket连接。

后端：使用Koa2建立WebSocket服务器

要使用Koa2建立WebSocket服务器，我们需要安装koa-websocket包：

npm install --save koa-websocket

然后，在您的Koa2应用中，使用以下代码创建一个WebSocket服务器：

const Koa = require('koa');
const app = new Koa();
const WebSocket = require('koa-websocket');

// 使用koa-websocket中间件
app.use(WebSocket());

app.ws.use((ctx, next) => {
  // 当客户端连接时执行
  ctx.websocket.on('message', (message) => {
    // 从客户端接收消息时执行
  });

  ctx.websocket.on('close', () => {
    // 当客户端断开连接时执行
  });
});

app.listen(3000);

前端：使用React Hooks连接WebSocket

在React应用中，我们可以使用useWebSockets Hook来连接到后端的WebSocket服务器：

import { useEffect, useState } from 'react';
import { useWebSockets } from '@react-native-community/hooks';

const App = () => {
  const [messages, setMessages] = useState([]);

  const {
    webSocket,
    send,
    close,
  } = useWebSockets('ws://localhost:3000');

  useEffect(() => {
    webSocket?.onmessage = (message) => {
      // 从服务器接收消息时执行
    };

    webSocket?.onclose = () => {
      // 与服务器断开连接时执行
    };
  }, [webSocket]);

  return (
    <div>
      <ul>
        {messages.map((message) => (
          <li key={message}>{message}</li>
        ))}
      </ul>
      <input type="text" onKeyPress={(e) => {
        if (e.key === 'Enter') {
          send(e.target.value);
        }
      }} />
    </div>
  );
};

export default App;