用 Node.js+WebSocket 实现无刷新聊天室-JavaScript中文网-JavaScript教程资源分享门户

前言

随着互联网的发展，聊天室越来越成为人们日常生活中的一部分。在前端开发中，我们经常会遇到需要实现聊天室的需求。而传统的聊天室实现方式通常是通过轮询实现，这种方式会造成服务器压力过大，同时也会对用户体验造成影响。因此，本文将介绍一种基于 Node.js+WebSocket 实现无刷新聊天室的方法，以提高服务器响应速度和用户体验。

WebSocket 简介

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 协议在 2011 年被定为标准，它可以在客户端和服务器之间建立持久连接，实现实时通信。

与传统的 HTTP 请求不同，WebSocket 连接是通过 HTTP 请求进行握手，握手成功后，连接将保持打开状态，允许客户端和服务器之间进行双向通信。这种方式不仅可以提高服务器的响应速度，还能够减少带宽的使用。

Node.js 实现 WebSocket

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它可以在服务器端运行 JavaScript 代码。在 Node.js 中，可以使用第三方模块 ws 来实现 WebSocket。

安装 `ws`

在命令行中运行以下命令来安装 ws：

npm install ws

创建 WebSocket 服务器

在 Node.js 中，可以通过以下代码来创建 WebSocket 服务器：

// www.javascriptcn.com code example
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

以上代码中，我们首先引入了 ws 模块，然后创建了一个 WebSocket 服务器实例 wss，并指定了监听的端口号为 8080。在 connection 事件中，我们监听客户端的连接，并在客户端连接成功后，打印一条日志。在 message 事件中，我们监听客户端发送的消息，并通过 wss.clients 遍历所有客户端，并将消息发送给所有已连接的客户端。在 close 事件中，我们监听客户端的断开连接事件，并在客户端断开连接后，打印一条日志。

创建 WebSocket 客户端

在前端中，可以通过以下代码来创建 WebSocket 客户端：

// www.javascriptcn.com code example
const socket = new WebSocket('ws://localhost:8080');

socket.addEventListener('open', (event) => {
  console.log('Connected to server');
});

socket.addEventListener('message', (event) => {
  console.log(`Received message => ${event.data}`);
});

socket.addEventListener('close', (event) => {
  console.log('Disconnected from server');
});

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault();
  const input = document.querySelector('input[type="text"]');
  const message = input.value;
  input.value = '';
  socket.send(message);
});

以上代码中，我们首先创建了一个 WebSocket 客户端实例 socket，并指定了连接的地址为 ws://localhost:8080。在 open 事件中，我们监听客户端连接成功事件，并打印一条日志。在 message 事件中，我们监听服务器发送的消息，并打印消息内容。在 close 事件中，我们监听客户端断开连接事件，并打印一条日志。在表单提交事件中，我们监听用户提交消息的事件，并通过 socket.send 发送消息给服务器。

示例代码

以下是一个基于 Node.js+WebSocket 实现的简单聊天室示例代码：

服务器代码

// www.javascriptcn.com code example
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

客户端代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket Chat Room</title>
</head>
<body>
  <ul id="messages"></ul>
  <form>
    <input type="text" placeholder="Type your message here" />
    <button>Send</button>
  </form>
  <script>
    const socket = new WebSocket('ws://localhost:8080');
    const messages = document.getElementById('messages');

    socket.addEventListener('open', (event) => {
      console.log('Connected to server');
    });

    socket.addEventListener('message', (event) => {
      console.log(`Received message => ${event.data}`);
      const li = document.createElement('li');
      li.textContent = event.data;
      messages.appendChild(li);
    });

    socket.addEventListener('close', (event) => {
      console.log('Disconnected from server');
    });

    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();
      const input = document.querySelector('input[type="text"]');
      const message = input.value;
      input.value = '';
      socket.send(message);
    });
  </script>
</body>
</html>

结语

本文介绍了一种基于 Node.js+WebSocket 实现无刷新聊天室的方法，通过 WebSocket 协议实现双向通信，提高服务器响应速度和用户体验。同时，本文也提供了完整的示例代码，以供读者参考。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d152f6a941bf71342cd740

用 Node.js+WebSocket 实现无刷新聊天室

前言