使用nodejs、socket.io和expressjs进行实时聊天

  NodeJS 使我能够用我最喜欢的语言之一编写后端代码：JavaScript。它是构建实时应用程序的完美技术。在本教程中，我将向您展示如何使用 ExpressJS 和 Socket.io 构建网络聊天应用程序。

  设置环境

  当然，首先要做的就是在您的系统上安装 NodeJS。如果您是 Windows 或 Mac 用户，可以访问 .org 并下载安装程序。如果您更喜欢 Linux，我建议您参考此链接。虽然我不会详细介绍这一点，但如果您遇到任何安装问题，我很乐意提供帮助；只需在本文下方发表评论即可。

  安装 NodeJS 后，您就可以设置所需的工具了。

  ExpressJS - 这将管理服务器和对用户的响应 Jade - 模板引擎 Socket.io - 允许前端和后端之间的实时通信

  继续，在空目录中创建一个包含以下内容的 package.json 文件。

{
"name": "RealTimeWebChat",
"version": "0.0.0",
"description": "Real time web chat",
"dependencies": {
    "socket.io": "latest",
    "express": "latest",
    "jade": "latest"
},
"author": "developer"
}

  登录后复制

  通过使用控制台（在 Windows - 命令提示符下），导航到您的文件夹并执行：

npm install

  登录后复制

  几秒钟之内，您就会将所有必需的依赖项下载到 node_modules 目录中。

  开发后端

  让我们从一个简单的服务器开始，它将提供应用程序的 HTML 页面，然后继续更有趣的部分：实时通信。使用以下核心expressjs代码创建一个index.js文件：

var express = require("express");
var app = express();
var port = 3700;
app.get("/", function(req, res){
res.send("It works!");
});
app.listen(port);
console.log("Listening on port " + port);

  登录后复制

  上面，我们创建了一个应用程序并定义了它的端口。接下来，我们注册了一个路由，在本例中，它是一个不带任何参数的简单 GET 请求。目前，路由的处理程序只是向客户端发送一些文本。最后，当然，在底部，我们运行服务器。要初始化应用程序，请从控制台执行：

node index.js

  登录后复制

  服务器正在运行，因此您应该能够打开http://127.0.0.1:3700/并看到：

It works!

  登录后复制

  现在，我们应该提供 HTML，而不是“它有效”。使用模板引擎代替纯 HTML 可能会更有益。 Jade 是一个很好的选择，它与 ExpressJS 有很好的集成。这是我在自己的项目中通常使用的。创建一个名为 tpl 的目录，并将以下 page.jade 文件放入其中：

!!!
html
head
    title= "Real time web chat"
body
    #content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
    .controls
        input.field(style='width:350px;')
        input.send(type='button', value='send')

  登录后复制

  Jade 的语法并不复杂，但是，要获得完整的指南，我建议您参考jade-lang.com。为了将 Jade 与 ExpressJS 一起使用，我们需要进行以下设置。

app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
res.render("page");
});

  登录后复制

  此代码通知 Express 您的模板文件所在位置以及要使用的模板引擎。它全部指定将处理模板代码的函数。一旦一切设置完毕，我们就可以使用 response 对象的 .render 方法，并将我们的 Jade 代码发送给用户。

  此时的输出并不特殊；无非是一个 div 元素（id 为 content 的元素），它将用作聊天消息的容器和两个控件（输入字段和按钮），我们将使用它们来发送消息。

  因为我们将使用一个外部 JavaScript 文件来保存前端逻辑，所以我们需要通知 ExpressJS 在哪里寻找此类资源。创建一个空目录 public，并在调用 .listen 方法之前添加以下行。

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

  登录后复制

  到目前为止一切顺利；我们有一个成功响应 GET 请求的服务器。现在，是时候添加 Socket.io 集成了。更改此行：

app.listen(port);

  登录后复制

  至：

var io = require('socket.io').listen(app.listen(port));

  登录后复制

  上面，我们将 ExpressJS 服务器传递给了 Socket.io。实际上，我们的实时通信仍然会发生在同一端口上。

  接下来，我们需要编写从客户端接收消息并将其发送给所有其他客户端的代码。每个 Socket.io 应用程序都以 connection 处理程序开始。我们应该有一个：

io.sockets.on('connection', function (socket) {
socket.emit('message', { message: 'welcome to the chat' });
socket.on('send', function (data) {
    io.sockets.emit('message', data);
});
});

  登录后复制

  传递给处理程序的对象 socket 实际上是客户端的套接字。将其视为服务器和用户浏览器之间的连接点。连接成功后，我们发送 welcome 类型的消息，当然，还会绑定另一个将用作接收器的处理程序。结果，客户端应该发出一条名为 send 的消息，我们将捕获该消息。接下来，我们只需使用 io.sockets.emit 将用户发送的数据转发到所有其他套接字。

  通过上面的代码，我们的后端已准备好向客户端接收和发送消息。让我们添加一些前端代码。

  开发前端

  创建 chat.js，并将其放置在应用程序的 public 目录中。粘贴以下代码：

window.onload = function() {
    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i
[1]: https://woniuwang.oss-cn-beijing.aliyuncs.com/20250603/d3b502e6802b9081ac8c4a31b51715da_1.jpg