在Node环境下socket.io前后端实时通信（聊天室的实现）

最新推荐文章于 2022-12-09 13:20:59 发布

两块大鸡腿�

最新推荐文章于 2022-12-09 13:20:59 发布

阅读量627

点赞数

本文链接：https://blog.csdn.net/BigChicken3/article/details/90452800

版权

配置环境

前端环境：“socket.io-client”: “2.2.0”
后端环境：“socket.io”: “2.2.0”,
均在package.json中加上即可

在www服务器上引入socket.io模板

var socketIo = require("socket.io");//引入socket.io
var io = new socketIo(server);//将socket.io注入express模块

在webpack打包全局配置语法

new webpack.ProvidePlugin({
            io: 'socket.io-client',
            'window.io': 'io',
        }),

webpack反向代理配置

'/socket.io/*': {
                target: 'http://localhost:3000',
                host: 'http://localhost:3000',
                secure: false,
                onProxyRes: function onProxyRes(proxyRes, req, res) {

                }
            },

www服务器作为服务端

io.on("connection", function (socket) {
    // socket.io 使用 emit(eventname,data) 发送消息，使用on(eventname,callback)监听消息
    //监听客户端发送的 sendMsg 事件
    console.log("连接成功");
    socket.on('generate.html-register', function (id, msg) {
        // console.log("generate.html-register");
        socket.join('room')
    });

    socket.on('href.html-register', function (id, msg) {
        // console.log("href.html-register");
        socket.join('room')
    });


    socket.on('wechatLoginSuccessCallback', function (roomId) {
        console.log("服务器收到需要通知的客户端id：", roomId);
        socket.broadcast.to(roomId).emit("wechatLoginSuccessCallback", '');
    })

    socket.on('upload_file_success', function (msg) {
        socket.broadcast.to('room').emit("generate.html-uploadSuccess", '');//广播到'room'除了自己
        socket.emit("generate.html-uploadSuccess", '');//再将广播发给自己
    })
});

module.exports = io;

客户端使用

//因为本机使用localhost所以connect（url）中的url可以不填或者写http://localhost
var socket = io.connect();  //连接服务端
socket.emit("generate.html-register", '');  //发送信息，第一个参数为发送得到对象function，第二对象为内容

socket.on("generate.html-uploadSuccess", function (data) { //绑定监听（内容可忽略）

            $('#shadow').css("display","block");
            document.documentElement.style.overflowY = 'hidden';

            setTimeout(function () {
                $('#shadow').css("display","none");
                document.documentElement.style.overflowY = 'scroll';

                window.location.href = "preview.html";
            },5000);
        });

一般来说只有前端才能向后端请求，请求完成后端再做出响应反馈给前端。而socket.io机制就解决了后端可以主动向
前端发出请求，通过该原理即可实现聊天室的功能