2个websockets之间的冲突

Question

我一直在尝试创建一个根据用户偏好显示比特币和以太坊价格的脚本。因此，如果用户点击比特币按钮，它会显示比特币价格，当用户点击以太坊按钮时，它会显示以太坊。

一切正常，但是当你点击比特币按钮然后点击以太坊按钮时，它会产生冲突并不断在比特币和以太坊价格之间切换。

我试过

pricesWs1.close();和 pricesWs.close();但它完全关闭了 1 个 websocket，你不能在价格之间交换。

Javascript

const pricesWs = new WebSocket('wss://ws.coincap.io/prices?assets=bitcoin')
 const pricesWs1 = new WebSocket('wss://ws.coincap.io/prices?assets=ethereum')  
 
 $(document).ready(function() {
    $('.buttonbtc').click(function(e) {  

pricesWs.onmessage = function (msg) {

        var str = msg.data                                      
    var matches = str.match (/\b\d+(?:.\d+)?/);
    var finalprice = parseFloat(matches);
     document.getElementById("btc").innerHTML = finalprice;
     
}

   });
});

 $(document).ready(function() {
    $('.buttoneth').click(function(e) {  
    
pricesWs1.onmessage = function (msgg) {
    
    var str = msgg.data                                      
    var matches = str.match (/\b\d+(?:.\d+)?/);
    var finalprice = parseFloat(matches);
    document.getElementById("btc").innerHTML = finalprice;
}

   });
});

LIVE DEMO: https://jsfiddle.net/s9rv1agu/

Answer 1

问题似乎是您不断收到来自 coinbase 服务器的响应消息。您可以阻止文本显示在消息上更新，除非发送它的套接字与上次单击的按钮匹配。

在这种情况下，我将最后一次单击按钮的值存储在一个名为 cp 的变量中，并且仅在相应套接字发送的消息上更新显示。

代码：

    const pricesWs = new WebSocket('wss://ws.coincap.io/prices?assets=bitcoin')
     const pricesWs1 = new WebSocket('wss://ws.coincap.io/prices?assets=ethereum');
     
     var cp = -1;//current_price
     
     $(document).ready(function() {
        $('.buttonbtc').click(function(e) {  
    
     cp = 0;
     document.getElementById("btc").innerHTML = "pending...";
    pricesWs.onmessage = function (msg) {
    
         if(cp == 0) {
            var str = msg.data                                      
        var matches = str.match (/\b\d+(?:.\d+)?/);
        var finalprice = parseFloat(matches);
         document.getElementById("btc").innerHTML = finalprice;
    }
         
    }
    
       });
    });
    
    
     $(document).ready(function() {
        $('.buttoneth').click(function(e) {  
        
    cp = 1;
    document.getElementById("btc").innerHTML = "pending...";
    pricesWs1.onmessage = function (msgg) {
        if(cp == 1) {
        var str = msgg.data                                      
        var matches = str.match (/\b\d+(?:.\d+)?/);
        var finalprice = parseFloat(matches);
    
        document.getElementById("btc").innerHTML = finalprice;
        }
    }
    
       });
    });

如果你还想阻止问题的根本原因（服务器发送的持续消息），你将需要启动套接字连接并在消息后关闭连接（或者可能使用 coinbase 进行一些配置这只会发回 1 条消息）。

var pricesWs;
var pricesWs1;

const wlist = ['wss://ws.coincap.io/prices?assets=bitcoin',
             'wss://ws.coincap.io/prices?assets=ethereum'];
 
 var cp = -1;//current_price
 
 $(document).ready(function() {
    $('.buttonbtc').click(function(e) {  

 cp = 0;
 document.getElementById("btc").innerHTML = "pending...";
 pricesWs = new WebSocket(wlist[0]);
  pricesWs.onopen = function() {
pricesWs.onmessage = function (msg) {

     if(cp == 0) {
        var str = msg.data                                      
    var matches = str.match (/\b\d+(?:.\d+)?/);
    var finalprice = parseFloat(matches);
     document.getElementById("btc").innerHTML = finalprice;
}
     pricesWs.close();
}
}

   });
});


 $(document).ready(function() {
    $('.buttoneth').click(function(e) {  
    
cp = 1;
document.getElementById("btc").innerHTML = "pending...";
 pricesWs1 = new WebSocket(wlist[1]);
 pricesWs1.onopen = function() {
pricesWs1.onmessage = function (msgg) {
    if(cp == 1) {
    var str = msgg.data                                      
    var matches = str.match (/\b\d+(?:.\d+)?/);
    var finalprice = parseFloat(matches);

    document.getElementById("btc").innerHTML = finalprice;
        }
    pricesWs1.close();
    }
}

   });
});

还可以添加额外的检查以确保在单击按钮时套接字不在打开过程中

2个websockets之间的冲突

Conflict between 2 websockets

javascript

api

websocket

cryptocurrency