用 WebSockets 建立实时聊天室：初学者指南

前端

2023-12-11 18:24:25

WebSockets：实时应用程序的基石

在当今快节奏的数字时代，实时通信已成为现代 Web 应用程序不可或缺的一部分。从即时消息传递到在线协作，人们希望与应用程序进行即时互动。这正是 WebSockets 闪耀的地方，它为构建实时应用程序提供了强大的基础。

WebSockets 是一种通信协议，建立在 TCP 之上，专为在客户端和服务器之间创建持久、双向通信通道而设计。与传统 HTTP 轮询技术不同，WebSockets 允许服务器主动向客户端推送更新，从而消除了延迟和资源浪费。

WebSockets 的优势：

实时通信： WebSockets 提供真正的实时通信，使客户端和服务器可以即时交换数据。
低开销： 与 HTTP 轮询相比，WebSockets 显著减少了网络开销，提高了应用程序的性能。
双向通信： WebSockets 允许客户端和服务器同时发送和接收消息，实现了真正的交互性。
持久连接： WebSockets 建立持久连接，无需重复建立连接，从而简化了通信流程。

使用 WebSockets 构建实时聊天室

为了深入了解 WebSockets 的实际应用，我们将在 Node.js 和 Socket.IO 的帮助下构建一个简单的实时聊天室。

1. 创建 Node.js 服务器

使用 npm 初始化一个新的 Node.js 项目：

npm init -y

安装必要的依赖项：

npm install express socket.io

创建服务器文件（例如 server.js）：

const express = require('express');
const socketIO = require('socket.io');

const app = express();
app.listen(3000, () => console.log('Server running on port 3000'));

const io = socketIO(server);

io.on('connection', (socket) => {
  console.log('New client connected');
  socket.on('message', (message) => {
    io.emit('message', message);
  });
});

2. 创建客户端

创建一个 HTML 文件（例如 index.html）：

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
  <script>
    const socket = io();
    const form = document.getElementById('form');
    const input = document.getElementById('input');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const message = input.value;
      socket.emit('message', message);
    });

    socket.on('message', (message) => {
      console.log(message);
    });
  </script>
</head>
<body>
  <h1>Real-Time Chat Room</h1>
  <form id="form">
    <input type="text" id="input" placeholder="Enter message">
    <button type="submit">Send</button>
  </form>
</body>
</html>