在 Express.js 中使用 WebSocket 和 Socket.IO 实现聊天应用程序-JavaScript中文网-JavaScript教程资源分享门户

本文将介绍如何使用 Express.js 和 WebSocket、Socket.IO 库来构建一个简单的聊天应用程序。本文将涵盖 WebSocket 和 Socket.IO 的基本概念和用途，并提供实际应用程序中的代码示例和详细解释。本文旨在帮助前端工程师熟悉 WebSocket 和 Socket.IO 技术，并且能够使用这些技术开发实用的应用程序。

WebSocket 和 Socket.IO 简介

WebSocket 是一种可在客户端和服务器之间进行双向通信的协议。相比于传统的 HTTP 协议，它可以更快地传输数据，还可以防止过多的 HTTP 请求导致的通信延迟。使用 JavaScript，可以在客户端上与 WebSocket 进行交互，而后端的服务器必须实现一个能够处理 WebSocket 协议的服务器软件。

Socket.IO 是一个构建在 WebSocket 之上的库，它提供了更强大和更灵活的双向通信功能。Socket.IO 还支持长轮询（long polling），跨浏览器的 WebSockets、JSONP 和 XMLHTTP（Ajax）请求，并具有断线重连、消息传递和房间分组等高级特性。Socket.IO 还有许多其他扩展和插件，可以根据需要进行使用。

实现聊天应用程序

现在，我们将使用 Express 和 Socket.IO 库来实现一个简单的聊天应用程序。该应用程序将允许多个用户进行交互，发送消息，并通过 WebSockets 进行实现。以下是需要安装的依赖项：

npm install express

npm install socket.io

为了创建一个简单的用户界面，我们将使用 Bootstrap，以下是文档中使用的完整HTML和CSS代码：

// javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.IO Chat Room</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <style>
        #messages {
            padding: 16px;
            border-radius: 10px;
            background-color: #c5d6ff;
            margin-bottom: 20px;
        }

        #messages div {
            margin-bottom: 16px;
        }

        #messages span {
            margin-right: 8px;
            font-weight: bold;
        }

        form {
            padding-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div id="messages"></div>
            <form id="send-form">
                <div class="form-group">
                    <input type="text" class="form-control" id="message-input" placeholder="Enter message...">
                </div>
                <button type="submit" class="btn btn-primary">Send</button>
            </form>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
        integrity="sha384-aY+hs/rysGAtggx0cBsVD8wLl1QvU5G6U5ei6LD8W82fYv6bcP+v7RfEWEy8V7Fk"
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi94aq7"
        crossorigin="anonymous"></script>
<script>
    $(function () {
        var socket = io();

        $('form').submit(function (e) {
            e.preventDefault();

            socket.emit('chat message', $('#message-input').val());
            $('#message-input').val('');

            return false;
        });

        socket.on('chat message', function (msg) {
            $('#messages').append($('<div>').text(msg));
        });
    });
</script>
</body>
</html>

现在，让我们创建一个 Express.js 服务器，并使用 Socket.IO 库来进行消息通信。

// javascriptcn.com code example
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

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

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

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

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

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

以上代码创建了一个 Express.js 服务器，并在其根路径处提供了 index.html 页面。当一个用户请求此页面时，服务器将向浏览器发送 index.html 页面。当新用户连接到服务器时，服务器将打印一条消息，并为他们的连接创建一个唯一的标识符。然后，当用户通过浏览器向服务器发送一条消息时，Server 端代码将会将该消息发送回所有连接的用户。

现在，我们已经完成了我们的聊天应用程序。通过将这些代码放在一个单独的文件夹中，并使用以下命令运行服务器，就可以开始在本地主机上运行应用程序：

node index.js

要运行聊天应用程序，请打开您的 Web 浏览器并访问 http://localhost:3000。输入一个名称并按回车键，您就可以开始在服务器上测试您的聊天应用程序了。

结论

在本文中，我们已经了解了如何使用 Express.js 和 WebSocket、Socket.IO 库来构建一个简单的聊天应用程序。该应用程序允许多个用户以实时和交互方式进行通信，并演示了如何使用 Socket.IO 和 WebSockets 进行双向通信。此外，我们还了解了 Socket.IO 的基本功能，包括断线重连、消息传递和房间分组等高级特性。这些技术是现代 Web 应用程序中不可或缺的一部分，并且在各种情况下都被广泛使用。我们希望这篇文章能够使你更好地了解这些技术的实现方式，并为你今后的 Web 开发工作提供帮助。

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