Node.js 和 Socket.io 实现实时聊天室的教程-JavaScript中文网-JavaScript教程资源分享门户

实时聊天室是现代网络应用中不可或缺的功能之一。Node.js 和 Socket.io 是构建实时应用程序的最佳工具。本文将介绍如何使用这两个技术，实现一个实时聊天室。

准备工作

在开始编码之前，有一些准备工作需要完成。

安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。它允许我们使用 JavaScript 编写服务器端应用程序。下载并安装最新版本的 Node.js，你可以到官网下载安装包，也可以使用包管理器进行安装。

初始化项目

我们使用 npm 命令初始化和管理项目，确保你已经安装了 npm。在你的项目目录下执行以下命令，进行项目初始化。

npm init

在初始化过程中，npm 会问你一些问题，可以根据需要自行选择。

安装 Socket.io

Socket.io 是一个实现实时网络应用的库。它支持 WebSocket 协议，以及一些旧版浏览器使用的轮询机制。我们使用 npm 命令安装 Socket.io。

npm install socket.io --save

创建服务器

接下来，我们需要创建一个 Node.js 服务器，用于处理客户端的请求和连接。在项目根目录下创建一个 server.js 文件，并输入以下代码。

// javascriptcn.com 代码示例
// server.js

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

app.use(express.static(__dirname + '/public'));

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

http.listen(3000, function(){
  console.log('listening on *:3000');
});

上述代码中，我们使用 Express 库创建了一个服务器，并将其绑定在本地 3000 端口上。通过 express.static 中间件，我们让服务器能够在 public 文件夹中查找静态资源。在路由处理器中，我们将 index.html 文件发送给客户端。最后，我们使用 Socket.io 库创建了一个 WebSocket 服务器，并将其绑定到 Express 应用程序上。

创建客户端

现在，我们开始创建聊天室的客户端界面。在 public 目录下创建一个名为 index.html 的文件，并输入以下代码。

// javascriptcn.com 代码示例
<!doctype html>
<html>
  <head>
    <title>Socket.io Chat App</title>
    <style>
      #messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      #messages li {
        padding: 5px 10px;
      }
      #messages li:nth-child(odd) {
        background: #eee;
      }
      #input {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form">
      <input type="text" id="input" autocomplete="off">
      <button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      var form = document.getElementById('form');
      var input = document.getElementById('input');
      var messages = document.getElementById('messages');

      form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
          socket.emit('chat message', input.value);
          input.value = '';
        }
      });

      socket.on('chat message', function(msg) {
        var message = document.createElement('li');
        message.textContent = msg;
        messages.appendChild(message);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

上述代码中，我们创建了一个包含输入框和发送按钮的表单，以及一个用于显示聊天记录的列表。在 JavaScript 部分，我们通过 socket.io.js 文件创建了一个 WebSocket 连接，并监听了 chat message 事件和表单的 submit 事件，以便向服务器发送消息或接收消息。

实现聊天室

现在，我们已经创建好了服务器端和客户端代码，下面我们开始实现聊天室功能。

监听连接事件

当客户端连接到服务器时，我们需要为其创建一个 Socket 实例。在服务器代码中，添加以下代码。

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

监听断开事件

当客户端断开连接时，我们需要销毁该 Socket 实例。在服务器代码中，添加以下代码。

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

广播消息

当客户端发送消息时，我们需要将其广播给其他所有客户端。在服务器代码中，添加以下代码。

socket.on('chat message', function(msg) {
  console.log('message: ' + msg);
  io.emit('chat message', msg);
});

以上代码中，我们监听了 chat message 事件，并将其广播给所有客户端。

运行聊天室

现在，我们已经完成了聊天室的编码。在项目根目录下执行以下命令，启动 Node.js 服务器。

node server.js

在浏览器中访问 http://localhost:3000，就可以开始使用聊天室了。

总结

本文介绍了如何使用 Node.js 和 Socket.io 实现一个实时聊天室。我们学习了如何创建服务器、客户端代码，以及如何使用 Socket.io 来处理连接、断开和消息事件。聊天室已经越来越成为现代网络应用的一个重要组成部分，相信本文对你提供了一些帮助和指导。完整的代码可以在我的 GitHub 仓库中找到。

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