在现代 Web 应用程序中，实时性已经成为了一个非常重要的需求。为了满足这个需求，我们可以使用 Socket.io 库来创建实时通信。而对于前端界面的构建，React 则是一个非常流行的选择。
本文将介绍如何使用 React 和 Socket.io 来创建一个实时的聊天室应用程序。我们将深入探讨如何设置 Socket.io 服务器、如何使用 React 来呈现聊天室界面、以及如何使用 Socket.io 客户端来实现实时通信。
设置 Socket.io 服务器
首先，我们需要设置 Socket.io 服务器。我们可以使用 Node.js 和 Express 来创建一个简单的服务器。在安装了 Node.js 和 npm 后，我们可以使用以下命令来创建一个新的 Node.js 项目：
npm init
接着，我们需要安装必要的依赖项：
npm install express socket.io
接下来，我们可以创建一个名为 server.js 的文件，用于设置服务器：
// www.javascriptcn.com code example
const express = require('express');
const app = express();
const server = app.listen(3000, () => {
console.log('Server started on port 3000');
});
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('User connected');
socket.on('disconnect', () => {
console.log('User disconnected');
});
});在这个文件中，我们首先创建了一个 Express 应用程序，并将其监听在端口 3000 上。然后，我们使用 Socket.io 来创建一个新的 WebSocket 服务器，并在连接时打印一条消息。最后，我们使用 socket.on('disconnect') 来处理客户端断开连接的事件。
现在，我们已经设置好了 Socket.io 服务器。接下来，让我们开始构建前端界面。
使用 React 呈现聊天室界面
对于 React 的使用，我们不做过多解释。在此，我们将直接讲解如何使用 React 来呈现聊天室界面。
我们可以使用 create-react-app 来创建一个新的 React 项目。在安装了 create-react-app 后，我们可以使用以下命令来创建一个新的项目：
npx create-react-app chat-room
接下来，我们需要安装必要的依赖项：
npm install socket.io-client
接着，我们可以在 src 文件夹下创建一个名为 Chat.js 的组件，用于呈现聊天室界面：
// www.javascriptcn.com code example
import React, { useState, useRef, useEffect } from 'react';
import io from 'socket.io-client';
const Chat = () => {
const [messages, setMessages] = useState([]);
const [message, setMessage] = useState('');
const socket = useRef();
useEffect(() => {
socket.current = io('http://localhost:3000');
socket.current.on('message', (message) => {
setMessages((messages) => [...messages, message]);
});
return () => {
socket.current.disconnect();
};
}, []);
const sendMessage = () => {
socket.current.emit('message', message);
setMessage('');
};
return (
<div>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</div>
);
};
export default Chat;在这个组件中，我们首先使用 useState 和 useRef 来创建状态和引用。然后，我们使用 useEffect 来设置 Socket.io 客户端，当客户端连接时，我们使用 socket.current.on('message') 来监听服务器发送的消息，并使用 setMessages 来更新消息列表。最后，我们使用 socket.current.emit('message') 来发送新的消息。
现在，我们已经完成了聊天室界面的构建。接下来，让我们将其连接到服务器。
使用 Socket.io 客户端实现实时通信
在 server.js 文件中，我们已经创建了一个 WebSocket 服务器，并使用 io.on('connection') 来监听连接事件。现在，我们需要使用 socket.emit('message') 来发送新的消息。
在 Chat.js 文件中，我们已经创建了一个 Socket.io 客户端，并使用 socket.current.on('message') 来监听服务器发送的消息。现在，我们需要使用 socket.current.emit('message') 来发送新的消息。
在 server.js 文件中，添加以下代码：
// www.javascriptcn.com code example
io.on('connection', (socket) => {
console.log('User connected');
socket.on('message', (message) => {
console.log(`Message received: ${message}`);
io.emit('message', message);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});在这个代码中，我们使用 socket.on('message') 来监听客户端发送的消息，并使用 io.emit('message') 来广播消息到所有连接的客户端。
现在，我们已经完成了聊天室应用程序的构建。通过这个应用程序，我们可以学习和了解如何使用 React 和 Socket.io 来创建实时应用程序，并且可以指导我们如何处理前端和后端的实时通信。
完整示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d54d9aa941bf71349cf33d