【问题标题】:How do I define and receive data from multiple WebSockets in JavaScript?如何在 JavaScript 中定义和接收来自多个 WebSocket 的数据?
【发布时间】:2015-08-17 22:44:10
【问题描述】:

我有以下代码 sn-p,我需要扩展它来定义多个 WebSocket,但我不知道该怎么做:

    var registerWebSocketHandlers = function(webSocket) {
    webSocket.onclose = function(){
        setTimeout(service.reopen, reconnectTimeout *= 2);
    };

    webSocket.onopen = function(e) {
        icc.publish('webSocket.reconnect');
        reconnectTimeout = defaultReconnectTimeout; //reset this
        deferredSend();
    };

    webSocket.onerror = function(e) {
        throw new Error("[WebSocket] An error occured " + e);
    };
    }

    var openConnection = function() {
    connectionWasOpenBefore = true;
    webSocket = new $window.WebSocket(xyz);
    webSocket.id = uniqid();
    registerWebSocketHandlers(webSocket);
    };

    var uniqid = function() {
    return (new Date().getTime()).toString(16);
    }

    service.setMessageEventHandler = function(cb) {
    webSocket.onmessage = function(msg) {
        if(msg.data.indexOf('Status: connected') === 0)
        {
            return;
        }
        var jsonObj = JSON.parse(msg.data);
        cb(jsonObj);
    };
};

如何扭曲代码以适应多个 WebSocket 的需求并为其附加适当的回调?

【问题讨论】:

    标签: javascript java angularjs sockets websocket


    【解决方案1】:

    使用多点模式。

    var socketFactory = module.factory('SocketFactory', function($rootScope){
        var factory = {};
        var instances = {};
    
        factory.getInstance = function(name, config){
            if(!(name in instances)){
                instances[name] = createNewWebSocketInstance(name, config);
            }
            return instances[name];
        };
    
        var createNewWebSocketInstance = function(name, config){
            var webSocket = new $window.WebSocket(config.address);
            webSocket.id = uniqid();
            registerWebSocketHandlers(webSocket, name, config.handlers); //etc.
            return webSocket;
        };
    
        var registerWebSocketHandlers = function(webSocket, name, handlers){
            webSocket.onmessage = function(event){
                $rootScope.$emit('SocketMessageReceived_' + name, event.data);
            };
            //etc...
        };
    
        return factory;
    });
    

    这将按名称分隔不同的 websocket。使用 getInstance('whatever') 获取标记为 'whatever' 的 websocket。

    var firstConfig = {url: '*****', username: '****', password: '****', etc: '****'};
    // You only need to pass in the config the first time.
    var firstWebSocket = SocketFactory.getInstance('firstSocket', firstConfig);
    var secondConfig = {url: '####', username: '####', password: '####', etc: '####'};
    var secondWebSocket = SocketFactory.getInstance('secondSocket', secondConfig);
    

    接下来,您可以从任何其他区域通过实例名称访问已配置的 websocket。

    var firstWebSocket = SocketFactory.getInstance('firstSocket');
    // It would probably be a good idea to add this listener in the SocketFactory instead and broadcast an event when there's a message so multiple listeners can respond to it.
    firstWebSocket.onmessage = function(){...};
    var secondWebSocket = SocketFactory.getInstance('secondSocket');
    secondWebSocket.onmessage = function(){...};
    

    【讨论】:

    • 感谢您的输入,但您能否说明一下我将如何区分来自不同套接字的消息以及如何启动实例?
    • 我编辑了答案以添加一些初始化示例。这是起始代码。您可能需要对此进行迭代以改进它。
    • 您可以通过多种方式区分不同的 websocket:a) 为每个使用不同的侦听器函数。 b) 在将消息传递到应用程序的其余部分之前,使用不同的侦听器函数添加一些区分信息(实例名称)。 c) 使用事件,并将实例名称添加为事件数据的额外属性。
    • 谢谢先生 :) 我已经想通了..但是您的版本看起来更具可读性和精确性..我仍然对调用适当的套接字处理程序有模糊的想法..我的意思是有可能通过多个套接字实现这一点??您能否详细说明您的这一行? registerWebSocketHandlers(webSocket, config.handlers); 我的意思是 config.handlers 参数定义..我的版本显示 registerWebSocketHandler 只有一个参数,然后我们直接从不同的服务类调用 setMessageEventHandler。
    • 我确信您需要做的事情是可能的。这取决于您希望它最终如何工作。下面是我要做的:在 SocketFactory 中,添加一个 onmessage 处理程序,它只是用实例名称 (webSocket.onmessage = function(event){ $rootScope.$emit('socketMessageReceived_' + instanceName, event.data); }) 重新广播消息。然后从应用程序中的任何位置监听 rootScope 事件“socketMessageReceived_firstSocket”。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-05
    • 1970-01-01
    • 2021-07-29
    • 1970-01-01
    • 2020-09-18
    相关资源
    最近更新 更多