使用 Node.js + Socket.IO 搭建简易聊天系统

文章目录

1. 背景
2. 前期准备

2.1. 安装Node.js
2.2. 安装Express和`Socket.IO`
2.3. 服务端
2.4. 客户端

3. 测试效果

1. 背景

这学期选了一门短学期课程，《计算机专业课程设计》，我们需要单独完成一个完整的项目并汇报给老师。我准备借鉴 CodiMD 来实现一个基于 Node.js 的MarkDown文档协同编辑平台。

在我浏览CodiMD的源码时，发现项目中实现实时协同编辑的一个关键模块是Socket.IO，于是先从它开始学起，这篇博客是Socket.IO的一个入门项目，基于 Node.js 的聊天系统。

2. 前期准备

2.1. 安装Node.js

前往官网https://nodejs.org/en/download/进行下载，图形界面安装，按照提示进行即可

Mac OS也可以用brew安装

brew install node

2.2. 安装Express和`Socket.IO`

先创建项目文件夹，将它命名为myapp。

mkdir myapp
cd myapp

然后安装库文件。

npm install express socket.io --save

2.3. 服务端

创建index.js。获取某一客户端传入的聊天消息，并返回给所有客户端。

// index.js
// 获取Express并创建服务
var app = require('express')();
// 获取http模块
var http = require('http').Server(app);
// 获取socket.io模块
var io = require('socket.io')(http);
// 设置监听端口为进程端口或3000端口
var port = process.env.PORT || 3000;
// 请求根路径时，返回index.html
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
// 建立新的 TCP 流时会触发connection事件，执行回调函数
io.on('connection', function(socket){
    // 获取传入的'chat message'信息
  socket.on('chat message', function(msg){
    // 将'chat message'向所有客户端进行广播
    io.emit('chat message', msg);
  });
});
// 监听端口
http.listen(port, function(){
  console.log('listening on *:' + port);
});

2.4. 客户端

创建index.html，向服务端发送聊天消息，并将服务端返回的消息显示在界面中。

<!doctype html>
<html>

    <head>
        <title>Socket.IO chat</title>
        <!-- css样式文件 -->
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font: 13px Helvetica, Arial;
            }

            form {
                background: #000;
                padding: 3px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }

            form input {
                border: 0;
                padding: 10px;
                width: 90%;
                margin-right: .5%;
            }

            form button {
                width: 9%;
                background: rgb(130, 224, 255);
                border: none;
                padding: 10px;
            }

            #messages {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            #messages li {
                padding: 5px 10px;
            }

            #messages li:nth-child(odd) {
                background: #eee;
            }

            #messages {
                margin-bottom: 40px
            }

        </style>
    </head>

    <body>
        <ul id="messages"></ul>
        <form action="">
            <input id="m" autocomplete="off" /><button>Send</button>
        </form>
        <!-- 加载socket.io和jquery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(function () {
                var socket = io();
                // 用户点击Send触发Submit事件
                $('form').submit(function () {
                    // 向服务端发送文本框中的内容
                    socket.emit('chat message', $('#m').val());
                    // 清空文本框
                    $('#m').val('');
                    return false;
                });
                // 接受到服务端发送的'chat message'时
                socket.on('chat message', function (msg) {
                    // 将接受到的消息显示在消息界面
                    $('#messages').append($('<li>').text(msg));
                    // 屏幕向下滚动
                    window.scrollTo(0, document.body.scrollHeight);
                });
            });

        </script>
    </body>

</html>

3. 测试效果

完成上述步骤，目录树应该是这样的。

xxx/myapp
├── index.html
├── index.js
├── node_modules
├── package-lock.json
└── package.json

在myapp文件夹下执行以下命令。

node index.js

当命令行显示 listening on *:3000，就成功运行了。

接下来分别打开两个浏览器，在聊天窗口中进行对话。

$\text{Figure 1. Safari}$

$\text{Figure 2. Chrome}$

测试成功。

项目的完整代码可以参考Github。

联系邮箱：[email protected]

CSDN：https://me.csdn.net/qq_41729780

知乎：https://zhuanlan.zhihu.com/c_1225417532351741952

公众号：复杂网络与机器学习

欢迎关注/转载，有问题欢迎通过邮箱交流。