只需100行代码，就可创建自己的React Hooks聊天室

2023-11-19 11:47:05

准备工作

首先，我们需要一个React项目来开始。如果你还没有一个，可以使用create-react-app创建一个。

npx create-react-app my-chat-app

安装必要的依赖项：

npm install socket.io-client

搭建服务器

我们将使用一个简单的Node.js服务器来处理聊天室的通信。在你的项目根目录创建一个server.js文件，并输入以下内容：

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('message', (message) => {
    io.emit('message', message);
  });

  socket.on('disconnect', () => {
    console.log('a user disconnected');
  });
});

server.listen(3000);

然后，在终端中运行以下命令来启动服务器：

node server.js

构建聊天室

在你的React项目中，创建一个src目录，并在其中创建一个App.js文件。这个文件将包含我们的聊天室组件。

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const App = () => {
  const [socket, setSocket] = useState(null);
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');

  useEffect(() => {
    const newSocket = io('localhost:3000');
    setSocket(newSocket);

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

  useEffect(() => {
    if (socket) {
      socket.on('message', (message) => {
        setMessages([...messages, message]);
      });
    }
  }, [socket, messages]);

  const sendMessage = (e) => {
    e.preventDefault();
    socket.emit('message', message);
    setMessage('');
  };

  return (
    <div>
      <h1>Chat Room</h1>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
      <form onSubmit={sendMessage}>
        <input value={message} onChange={(e) => setMessage(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default App;