2017-09-13 853 views
0

我正在嘗試學習WebSockets,並且我已經在Node中創建了一個websocket服務器,現在正在處理瀏覽器實現。我測試了服務器的工作原理並響應了我想如何使用名爲Smart WebSocket Client的Chrome擴展。建立WebSocket連接,onopen永遠不會運行

瀏覽器中的控制檯顯示爲Button pressed!,當您按下按鈕時Connection lost! (1000)當我結束節點過程但從未說過Connection Established!

編輯:客戶端代碼是在使用HTTPS確保網站運行和服務於HSTS頭,而服務器代碼(目前,但不會繼續)是在本地主機上正常HTTP運行,如果它是任何關注。

服務器代碼:

const websock = require('./node_modules/ws'); 
const HashMap = require('./node_modules/hashmap'); 
const jsonparse = require('./node_modules/jsonparse'); 
const randomstring = require('./node_modules/randomstring'); 

class Session { 
    constructor(server) { 
     this.server = server; 
     this.clients = []; 
    } 
} 

var connections = new HashMap(); 
const json = new jsonparse(); 

const wss = new websock.Server({ port: 36245 }); 

process.on('SIGINT',function() { 
    console.log("Recieved SIGINT, stopping gracefully..."); 
    wss.clients.forEach(function (ws) { 
     console.log("-Ended connection with "+ws.upgradeReq.socket.remoteAddress+" (1001)"); 
     ws.closeReasonCode = 1001; 
     ws.close(); 
    }); 
    process.exit(1); 
}); 

wss.on('connection',function connection(ws,conn) { 
    console.log("+Recieved connection from "+ws._socket.remoteAddress); 
    ws.upgradeReq = conn; 
    ws.hasHandshook = false; 
    ws.onmessage = function message(msg) { 
     var message; 
     try { 
      message = JSON.parse(msg.data); 
     } catch (ex) { 
      ws.send("{\"e\":\"Invalid json.\"}"); 
      return; 
     } 
     if (!ws.hasHandshook) { 
      ws.hasHandshook = true; 
      if (message.type === "client") { 
       //ensure code was provided and has a room 
       if (typeof message.code === 'undefined' || !connections.has(message.code)) { 
        ws.send("{\"e\":\"Invalid game code.\"}"); 
        ws.closeReasonCode = 4001; 
        ws.closeDescription = "Invalid game code."; 
        console.log("-Ended connection with "+ws._socket.remoteAddress+ " (4001)"); 
        ws.close(); 
       } 
       if (typeof message.name === 'undefined') { 
        //TODO error out, no player name provided 
       } 
       //attach client to game session 
       ws.clientType = "client"; 
       ws.gameCode = message.code; 
       ws.playerName = 
       connections.get(message.code).clients.add(ws); 
       ws.send("{\"joingame\":\"true\"}"); 
      } else { 
       ws.send("{\"e\":\"Invalid type provided on handshake message.\"}"); 
       ws.closeReasonCode = 4000; 
       ws.closeDescription = "Invalid type provided on handshake message."; 
       console.log("-Ended connection with "+ws._socket.remoteAddress+" (4000)"); 
       ws.close(); 
      } 
     } 
    }; 
    ws.onclose = function close() { 
     console.log("-Ended connection with "+ws.upgradeReq.socket.remoteAddress+" (Client Closed)"); 
    } 
}); 

客戶端代碼,這是成功的一個按鈕的按下網頁上運行:

function DoJoinGame() { 
    console.log("Button pressed!"); 
    gameCode = document.getElementById('base-gameCode').value.toUpperCase(); 
    playerName = document.getElementById('base-playerName').value; 
    var ws = new WebSocket("ws://localhost:36245"); 
    ws.onopen = function (event) { 
     console.log("Connection Established!"); 
     ws.send("{\"type\":\"client\",\"code\":\""+gameCode+"\",\"name\":\""+playerName+"\""); 
    }; 
    ws.onmessage = function (msg) { 
     let message = JSON.parse(msg.data); 
     if (message.joingame) { //if this is a "client added to session" message, set display: none; on the codeEntry div 
      document.getElementById('codeEntry').style.display = "none"; 
     } 
     //TODO handle message 
    }; 
    ws.onclose = function (evt) { 
     console.log("Connection lost! ("+evt.code+":"+evt.reason+")"); 
    }; 
} 

謝謝您的幫助!

回答

0

問題修復。我試圖從一個安全的起源和鉻&有限公司連接到一個不安全的websocket服務器。不是粉絲。