使用 Socket.io 和 React 创建实时聊天应用程序

在本文中，我们将探索如何使用 Socket.io 和 React 的强大功能构建实时聊天应用程序。最后，你将拥有一个可以正常工作的聊天界面，可以实现用户之间的无缝通信。

前提条件

在我们深入之前，请确保已安装 Node.js 和 npm。你还需要对 React 有基本的了解。

使用 Socket.io 设置后端

安装依赖项

首先使用 Node.js 和 Socket.io 设置聊天应用程序的后端。

1. 创建一个新目录并导航到其中：

mkdir medium-chat-app
cd medium-chat-app
mkdir server
cd server

2. 初始化一个Node.js项目：

npm init -y

3. 安装必要的软件包：

npm install express socket.io cors

构建 Express 服务器

创建名为 server.js 的文件，并使用 Socket.io 设置 Express 服务器：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

const PORT = process.env.PORT || 5000;

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

建立 Socket.io 连接

在 server.js 文件中，添加以下代码来处理 Socket.io 连接：

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

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

添加 cors 实现和信息发送功能，服务器文件最终版本：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors= require('cors')

const app = express();

app.use(cors({
    origin: '*'
}));

const server = http.createServer(app);
const io = socketIo(server, {
    cors: {
      origin: '*',
    }
});

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

    socket.on('sendMessage', (message) => {
        io.emit('message', message); // Broadcast the message to all connected clients
    });
  
    socket.on('disconnect', () => {
      console.log('User disconnected');
    });
  });

const PORT = process.env.PORT || 5001;

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

构建 React 前端

创建一个 React 应用程序

现在让我们使用 React 创建聊天应用程序的前端。

1. 创建一个新目录并导航到其中：

mkdir client
cd client

2. 初始化一个React项目：

npx create-react-app .

在前端集成 Socket.io

安装socket.io-client软件包以在前端启用实时通信：

npm install socket.io-client

在 React 应用程序中，打开 src/App.js，添加以下代码以建立与 Socket.io 服务器的连接：

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

const socket = io('http://localhost:5000');

function App() {
  useEffect(() => {
    socket.on('connect', () => {
      console.log('Connected to server');
    });

    socket.on('disconnect', () => {
      console.log('Disconnected from server');
    });
  }, []);

  return (
    <div className="App">
      <h1>Real-Time Chat App</h1>
      {/* Chat interface components */}
    </div>
  );
}

export default App;

创建聊天界面

显示消息

让我们创建一个组件来实时显示消息。

• 在 src 目录中新建一个名为 Message.js 的文件。
• 在 Message.js 文件中添加以下代码：

import React from 'react';

const Message = ({ username, text }) => {
  return (
    <div className="message">
      <p className="message-username">{username}</p>
      <p className="message-text">{text}</p>
    </div>
  );
};

export default Message;

发送和接收消息

要启用发送和接收消息，在App.js按如下方式修改文件：

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

const socket = io('http://localhost:5000');

function App() {
  const [messages, setMessages] = useState([]);
  const [messageText, setMessageText] = useState('');

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

  const sendMessage = () => {
    socket.emit('sendMessage', { text: messageText });
    setMessageText('');
  };

  return (
    <div className="App">
      <h1>Real-Time Chat App</h1>
      <div className="messages">
        {messages.map((message, index) => (
          <Message key={index} username={message.username} text={message.text} />
        ))}
      </div>
      <div className="input-box">
        <input
          type="text"
          value={messageText}
          onChange={(e) => setMessageText(e.target.value)}
          placeholder="Type your message..."
        />
        <button onClick={sendMessage}>Send</button>
      </div>
    </div>
  );
}

export default App;

测试应用程序

1. 启动后端服务器：

node server.js

2. 启动React开发服务器：

npm start

3. 打开浏览器并导航至http://localhost:3000。您将看到聊天界面。

4. 打开多个浏览器选项卡或窗口来模拟不同用户的实时聊天。

结论

到这里，已成功使用 Socket.io 和 React 构建了一个实时聊天应用程序。本文介绍了集成 Socket.io 进行实时通信和构建简单聊天界面的基础知识。你可以根据自己的需要增强和自定义应用程序，例如添加用户身份验证或实现更高级的功能。

完整代码地址：https://github.com/abbasali123/medium-chat-app