簡體   English   中英

如何防止頁面重定向上與socket.io的多個連接?

[英]How to prevent multiple connections with socket.io on page redirect?

我正在使用Express和Socket.IO構建一個NodeJS應用,該應用指示客戶端腳本根據某些條件將用戶重定向到其他頁面。 我遇到的問題是當重定向時,我得到了另一個套接字連接。 在我的代碼中,我根據套接字ID跟蹤套接字會話,以便將消息發送到特定套接字以對其執行操作。 由於重定向創建了具有新ID的新套接字,因此我不再能夠實現此功能。

我嘗試過在重定向之前先斷開套接字,在連接后發送消息以斷開先前的套接字,等等。似乎沒有任何工作可以讓我輕松地管理帶有重定向的單個套接字連接。

免責聲明:我是Node,Socket.io等的新手。

這是我的服務器代碼:

var http    = require('http'),
    express = require('express');
var app     = express();
var server  = http.createServer(app);
var io      = require('socket.io')(server);
var port = 8000;

app.use(express.static(__dirname + '/public'));

var activeClientId;
var clientQ = [];
var clients = {};
var numUsers = 0;

function updateActive() {
    console.log("Updating active client...");

    activeClientId = clientQ.shift();
    var active = clients[activeClientId];
    while (!checkActive() && clientQ.length > 0) {
        if (typeof active !== 'undefined' && active !== null) {
            delete clients[activeClientId];
            active.disconnect();
            console.log("Force Disconnect Client: " + activeClientId);
            numUsers = Object.keys(clients).length;
        }

        activeClientId = clientQ.shift();
        active = clients[activeClientId];
    }

    if (checkActive()) {
        console.log("New Active Client: " + activeClientId);
    } else {
        console.log("Active Client Not Updated");
    }
};

function checkActive() {
    var active = clients[activeClientId];
    return typeof active !== 'undefined' && active !== null && active.connected;
};

io.on('connection', function (socket) {
    clients[socket.id] = socket;
    clientQ.push(socket.id);

    numUsers = Object.keys(clients).length;

    console.log("Client " + "#" + numUsers + " connected: " + socket.id);

    if (numUsers === 1) {
        activeClientId = socket.id;
    } else {
        updateActive();
    }

    if (socket.id === activeClientId) {
        socket.emit('game');
    } else {
        socket.emit('wait');
    }

    socket.on('play', function () {
        console.log("users: " + numUsers);
        console.log("curId: " + socket.id);
        console.log("actId: " + activeClientId);

        if (socket.id !== activeClientId && numUsers > 1) {
            socket.emit('kick');
        } else {
            console.log("Game started on client: " + socket.id);
        }
    });

    socket.on('disconnect', function () {
        console.log("Client " + "#" + numUsers + " disconnected: " + socket.id);

        delete clients[socket.id];

        numUsers = Object.keys(clients).length;

        updateActive();

        socket.broadcast.emit('disconnected', {
            numUsers: numUsers
        });
    });
});

server.listen(port, function () {
    console.log('Listening on port: %d', port);
});

而我的客戶:

$(function () {
    var socket = io();

    socket.on('game', function (data) {
        socket.disconnect();
        window.location.replace("/game");
    });

    socket.on('wait', function (data) {
        socket.disconnect();
        window.location.replace("/wait");
    });
});

/game頁面的代碼:

$(function () {
    var socket = io();

    socket.on('connect', function (data) {
        socket.emit('play');
    });

    socket.on('kick', function(data) {
        socket.disconnect();
        alert("KICK!");
        window.location.replace("/wait");
    });
});

\\wait頁面的代碼:

$(function () {
    var socket = io();

    socket.on('connect', function (data) {
        socket.emit('wait');
    });

    socket.on('game', function (data) {
        socket.disconnect();
        window.location.replace("/game");
    });
});

在客戶端在IO()中添加一些選項

{運輸:['websocket'],升級:false}

var socket = io('http://localhost:8000',{transports: ['websocket'], upgrade: false});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM