React+Websockets 实战教程：构建 SPA 即时聊天应用-JavaScript中文网-JavaScript教程资源分享门户

随着移动互联网的快速发展，即时通讯已成为人们日常交流的必备手段之一。本文将通过 React 和 Websockets 技术，教你如何实现构建即时聊天应用，并带给你深度学习和指导意义。

技术介绍

React 是由 Facebook 推出的一款 JavaScript 库，它采用组件化模式，使得开发者可以通过一些独立的、可重复使用的代码段来构建整个应用。React 的开发效率和性能都非常出色，现已成为前端开发的主流选择。

Websockets 是一项标准的网络协议，它提供了一种在 Web 应用中进行双向通信的方式。相比传统的 HTTP 协议，Websockets 更加灵活高效，具有时间实时性和可靠性。在即时通讯应用中，Websockets 是实现实时双向通讯的关键技术。

应用架构

本文所构建的即时聊天应用的技术架构如下：

应用的前端部分采用 React 技术栈，后端则基于 Node.js 实现。前后端通过 Websockets 进行双向通信，前端使用 Ant Design UI 组件库构建界面，后端使用 Express 框架搭建 HTTP 服务器并提供 Websockets 服务。

实现步骤

前端部分

界面设计

首先需要设计应用的界面。我们采用 Ant Design UI 组件库中的 Input 和 Button 组件分别作为输入框和发送按钮，使用 List 和 Comment 组件作为聊天记录展示区。具体实现如下：

import { Input, Button, List, Comment } from 'antd';

function ChatRoom(props) {
  const [msg, setMsg] = useState('');

  function handleInput(e) {
    setMsg(e.target.value);
  }

  function handleSubmit() {
    props.onSend(msg);
    setMsg('');
  }

  return (
    <div>
      <List
        dataSource={props.messages}
        renderItem={(item) => (
          <List.Item>
            <Comment
              author={item.username}
              content={<p>{item.content}</p>}
            />
          </List.Item>
        )}
      />
      <Input value={msg} onChange={handleInput} />
      <Button type="primary" onClick={handleSubmit}>发送</Button>
    </div>
  );
}

连接 Websockets

前端需要通过 Websockets 连接到后端服务器，与服务器进行双向通信。实现代码如下：

import { useEffect, useState } from 'react';
import './App.css';
import io from 'socket.io-client';
import ChatRoom from './components/ChatRoom';

function App() {
  const [messages, setMessages] = useState([]);
  const [socket, setSocket] = useState(null);

  function handleSend(msg) {
    socket.emit('message', { content: msg });
  }

  useEffect(() => {
    const socket = io('http://localhost:3001');

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

    setSocket(socket);
  }, []);

  return (
    <div className="App">
      {socket ? (
        <ChatRoom messages={messages} onSend={handleSend} />
      ) : (
        <div>正在连接服务器...</div>
      )}
    </div>
  );
}

export default App;

后端部分

搭建 HTTP 服务器

后端需要搭建一个 HTTP 服务器，并提供 Websockets 服务。我们使用 Express 框架快速实现：

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

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

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

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

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

http.listen(3001, () => {
  console.log('listening on *:3001');
});

与前端建立 Websockets 连接

后端需要监听 Websockets 的连接事件，并在连接建立之后监听客户端发来的消息，并将消息广播给所有连接的客户端。具体实现如下：

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

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

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

实现效果

完成上述步骤后，我们已经成功实现了一个即时聊天应用。现在通过浏览器打开两个窗口，在其中一个窗口内输入消息并发送，另一个窗口便可以实时接收到消息。效果如下：

总结

在本文中，我们借助 React 和 Websockets 技术，详细地展示了如何构建一个即时聊天应用。通过本次实战，你学习到了 React 组件化开发和 Websockets 双向通信的知识，并掌握了如何将前后端技术结合起来，实现 Web 应用的实时通讯功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a0bcd9add4f0e0ff8f7708

React+Websockets 实战教程：构建 SPA 即时聊天应用