Node.js 基于socket.io的简易聊天程序

本文链接：https://blog.csdn.net/m0_37617778/article/details/89140234

1、简单释义

socket.io是一个跨浏览器支持WebSocket的实时通讯的JS。

Socket.io支持及时、双向、基于事件的交流，可在不同平台、浏览器、设备上工作，可靠性和速度稳定。最典型的应用场景如：

实时分析：将数据推送到客户端，客户端表现为实时计数器、图表、日志客户。
实时通讯：聊天应用
二进制流传输：socket.io支持任何形式的二进制文件传输，例如图片、视频、音频等。
文档合并：允许多个用户同时编辑一个文档，并能够看到每个用户做出的修改。

Socket.io实际上是WebSocket的父集，Socket.io封装了WebSocket和轮询等方法，会根据情况选择方法来进行通讯。

Node.js提供了高效的服务端运行环境，但由于Browser对HTML5的支持不一，为了兼容所有浏览器，提供实时的用户体验，并为开发者提供客户端与服务端一致的编程体验，于是Socket.io诞生了。

2、应用示例

实现一个极简版的聊天程序，分为客户端代码和服务器端代码

服务端端：

const express = require('express');
const path = require('path');

const app = new express();
//利用 Express 托管静态文件,通过如下代码就可以将 public 目录下的图片、CSS 文件、
//JavaScript 文件对外开放访问了  例如:http://localhost:3000/socket.io.js
app.use(express.static("./public"));

// 绑定HTTP服务器实例，和express结合使用
let httpServer = require('http').createServer(app);
let io = require('socket.io').listen(httpServer);
//绑定端口 socket和server服务器共用同一个端口
httpServer.listen(3000);

//设置路由
app.get('/chat', (req, res) => {
    res.sendFile(path.resolve('./chat-socketio.html'));
});

let onlinePeopleNum = 0;
let ryMap = {};

// 服务端监听连接状态：io的connection事件表示客户端与服务端成功建立连接，
// 它接收一个回调函数，回调函数会接收一个socket参数。
io.on('connection', (socket) => {
    onlinePeopleNum++;
    console.log('有1个用户进入聊天室，当前在线人数：'+onlinePeopleNum);

    // 接收客户端发送的消息
    socket.on('user login', (data) => {
        console.log(data.name);
        
        ryMap[socket.id]=data.name;
        // io.to(socket.id).emit方法用于向指定的客户端发送消息，
        // 参数1表示自定义的事件名，参数2表示传入事件的参数   
        io.to(socket.id).emit('welcome message',`欢迎${data.name}进入聊天室！`);
        socket.broadcast.emit('broadcast', `欢迎${data.name}进入聊天室！`);
    });
    

     // 监听断开连接状态：socket的disconnect事件表示客户端与服务端断开连接
    socket.on('disconnect', () => {
        let name = ryMap[socket.id];
        onlinePeopleNum--;
        console.log(`${name}离开聊天室,当前在线人数：${onlinePeopleNum}`);
    });

    // 接收客户端发送的消息
    socket.on('client message', (data) => {
        let name = ryMap[socket.id];
        io.emit('broadcast',  `${name}：${data.msg}` );
    });
});

客户端：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chat</title>
    <script src="https://cdn.bootcss.com/socket.io/1.7.3/socket.io.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./socket.io.js"></script>
</head>

<body>
    <div id="app">
        <div id="name"></div>
        <input type="text" v-model="message" />
        <button @click="send">发送</button>
        <div id="content"> </div>
    </div>
    <script>
        const userName = ['张三', '李四', '王五', '李铭', '李雷', '韩梅梅', 'Tom', 'Lily'];
        // 模拟用户名
        let name = userName[Math.floor(Math.random() * 8)];
        // socket.io引入成功后，可通过io()生成客户端所需的socket对象。
        let socket = io('http://localhost:3000');
        var app = new Vue({
            el: '#app',
            data: {
                message: '',
            },
            methods: {
                send: function () {
                    // socket.emit()用户客户端向服务端发送消息，服务端与之对应的是socket.on()来接收信息。
                    socket.emit('client message', { msg: this.message });
                }
            },
            mounted: function () {
                document.querySelector('#name').innerHTML = '我的昵称：' + name;

                socket.on('connect', () => {
                    console.log('连接服务器成功！');
                });
                socket.on('disconnect', () => {
                    console.log('服务器异常，已与服务器失去联系');
                });
                socket.on('welcome message', (message) => {
                    //console.log(message);
                    // 获取内容显示区域Node
                    let con = document.querySelector('#content');
                    con.innerHTML = con.innerHTML + '<br/>' + message;
                });
                socket.on('broadcast', (message) => {
                    //console.log(message);
                    // 获取内容显示区域Node
                    let con = document.querySelector('#content');
                    con.innerHTML = con.innerHTML + '<br/>' + message;
                });

                socket.emit('user login', { name: '' + name });

            }
        })
    </script>
</body>

</html>

界面截图