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

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}` );
    });
});

客户端：

 

    
    
    
    
    
    
    



    

        

        
        发送
        
 
    
    

界面截图

3、遇到的问题

GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=Me0Csia net::ERR_CONNECTION_REFUSED

如果遇到上面的错误，如果文件的路径都正确的话，可能的原因就是服务器没有启动

socket.io.js下载地址

链接: https://pan.baidu.com/s/1BeOse0CaxyYmnlA9LiQtIQ 提取码: 54bg

参考文章链接：https://www.jianshu.com/p/4e80b931cdea