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

客户端:

 





    
    
    
    Chat
    
    
    



    

界面截图

Node.js 基于socket.io的简易聊天程序_第1张图片Node.js 基于socket.io的简易聊天程序_第2张图片

Node.js 基于socket.io的简易聊天程序_第3张图片

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

你可能感兴趣的:(#,Node)