Socket.io在选项卡中发射到特定客户端 [英] Socket.io emit to specific client in tabs

问题描述

我正在使用带有角的socket.io.它工作正常，但我的问题是，它会发送到Chrome中打开的所有标签页.当前的工作流程是将在多个选项卡中打开该应用程序以运行不同的模拟.当我按下按钮(动作)时，它将更新所有打开的选项卡.但是，我想发出到特定的选项卡.我该如何设计?我查看了stackoverflow和github，但无法使socket.id正常工作.

I am using socket.io with angular. It works fine but my problem is that it emits to all the tabs opened in Chrome. The current workflow is the app will be opened in multiple tabs to run different simulation. When i press the button (action) it updates all the opened tabs. However, i want to emit to specific tab. How do i design that? I looked at stackoverflow and github but couldnt get the socket.id to work.

服务器代码

app.use(function(req, res, next) {
    var socketid = ''
    socketio.sockets.on('connection', function(socket) {
        socketid = socket.id

        res.socketid = socketid
            // 
    });
    res.socketio = socketio;
    next();
});

    console.log('sockrt ' + res.socketid)
    res.socketio.emit('pyr', output) //res.socketid is undefined

已更新

app.js

app.use(function(req, res, next) {
    var socketid = ''
    socketio.sockets.on('connection', function(socket) {
        socketid = socket.id

        res.socketid = socketid
            // 
    });
    res.socketio = socketio;
    next();
});

py.controller.js(api端点)

py.controller.js (api endpoint)

export function index(req, res) {
        console.log('sockrt ' + res.socketid)
        res.socketio.emit('pyr', output)

    };

端点正在运行，socket.io正在运行，但是socket.id未定义.我只需要找出一种隔离浏览器选项卡连接的方法即可.

The endpoint is working and socket.io is working but the socket.id is undefined. I just need to figure out a way to isolate the connection to a browser tab.

推荐答案

好的，经过反复试验，我能够解决此问题.纵观SO，有一些基于Express和socket之间共享的Express会话的解决方案.当它起作用时，我无法隔离各个选项卡.我的用例是将此应用程序设置为可在浏览器的多个实例中使用的应用程序(将其视为报价引擎).以下解决方案对我有用.

Ok, I was able to solve this problem after some trial and error. Looking through SO, there were solutions based on express sessions shared between express and socket. While it worked, i was not able to isolate individual tabs. My use case is to set this as an app that can be used in multiple instances across browsers (think of it as quotation engine). The below solution worked for me.

服务器代码

  socketio.on('connection', function(socket) {
    socket.address = `${socket.request.connection.remoteAddress}:${socket.request.connection.remotePort}`;

    //  USED TO SET THE SOCKET ID FOR THE REQUEST
    socket.emit('initialize', socket.id)


    socket.connectedAt = new Date();
}

客户代码
在Angular中，我设置了一个初始化事件来存储选项卡的特定套接字ID

Client Code
In Angular, i setup an initialize event to store the specific socket Id for the tab

    this.socket.on('initialize', socketid => {
        console.log(socketid)
        this.socketid = socketid
    })

发送请求表达时，我将socketid作为标头发送

When the request is sent to express, i send the socketid as a header

return this.$http({
    method: 'POST',
    withCredentials: true,
    host: '127.0.0.1',
    data: sim_data,
    port: 3000,
    responseType: "arraybuffer",
    headers: {
        "X-socketid": this.socketid
    },
    url: '/api/blah'
})

服务器代码
最后，当express处理POST或使我从Header发送到socketid时

Server Code
Finally, when express processes the POST or get i emit to the socketid from Header

    // GET SOCKET ID FROM HEADER
    var socket_id = req.headers['x-socketid']

    if (typeof socket_id !== 'undefined' && socket_id) {
        var io = req.app.get('io')
        io.sockets.connected[socket_id].emit('pyr', output)
    }

下一步是将其与用户授权集成.

My next step is to integrate this with user authorization.

这篇关于Socket.io在选项卡中发射到特定客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！