websocket結合node.js實現(xiàn)雙向通信的示例代碼

更新時間：2023年02月10日 09:16:03 作者：xiaoyingyings

本文主要介紹了websocket結合node.js實現(xiàn)雙向通信的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

首先我們需要了解，什么是websocket，它的作用和優(yōu)勢是什么，為什么要用它。

什么是websocket?

websocket是基于TCP的一種雙向通信協(xié)議。在此之前，一直是采用輪詢的方式進行雙向通信，這種方式效率低下還非常浪費資源。為了解決這種問題，websocket應運而生。

特點：

雙向通信
websocket使得客戶端跟服務端之間交換數(shù)據(jù)變得更加簡單。允許服務器主動向客戶端推送數(shù)據(jù)。瀏覽器只需要和服務器完成一次握手，就可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。

實時性強
服務器可以主動給客戶端推送數(shù)據(jù)，相比http請求需要先由客戶端發(fā)起請求，瀏覽器才會響應，延遲明顯更少、時間更短。

連接保持
websocket連接創(chuàng)建成功后，只要連接不斷開，通信會一直保持，而且還會省略部分狀態(tài)信息（http請求可能每次請求都需要攜帶狀態(tài)信息）
相對于http，websocket優(yōu)勢顯而易見。所以在一些實時通信上，都需要用到websocket，比如多媒體聊天、玩家游戲、頁面局部刷新、協(xié)同編輯等場景。

介紹完了什么是websocket，下面介紹下如何使用websocket。

WebSocket 的用法很簡單：

var ws = new WebSocket("ws://localhost:8181");

// 指定連接成功后的回調函數(shù)
ws.onopen = function() { ?
// 向服務器發(fā)送數(shù)據(jù)，數(shù)據(jù)類型包括文本類型/blob對象/ArrayBuffer對象
? ws.send("Hello WebSockets!");?
};

// 指定收到服務端數(shù)據(jù)后的回調函數(shù)
(注意：返回數(shù)據(jù)可能是文本，也可能是二進制數(shù)據(jù)（blob對象或Arraybuffer對象）)
ws.onmessage = function(e) {
? console.log( "收到服務端信息: " + e.data);
? ws.close(); // 關閉websocket連接方法
};

// 指定連接關閉后的回調函數(shù)
ws.onclose = function() {
? console.log("連接已關閉");
}; ? ?

然后是服務端，服務端需要下載nodejs-websocket：

npm i nodejs-websocket

nodejs-websocket文檔地址這個文檔里詳細描述了如何使用，這里不做贅述。直接上代碼展示雙方通信效果：

客戶端：
（這里使用了vue框架搭建項目，把該方法放進vue頁面即可,多余代碼不再多寫）

export default {
  mounted () {
    this.contactSocket()
  },
  methods: {
    contactSocket () {
      if (window.WebSocket) {
        const ws = new WebSocket('ws://192.168.1.124:8181')
        ws.onopen = function () {
          console.log('連接服務器成功')
          ws.socket.send('你好服務器')
        }
        ws.onmessage = function (e) {
          alert(e.data)
        }
        ws.onclose = function () {
          console.log('連接已關閉')
        }
      } else {
        console.log('當前瀏覽器不支持WebSocket！')
      }
    }
  }
}

服務端：
（這里是命名為server.js的文件，放在了vue項目的根目錄，啟動時候需要啟動node服務，終端拆分一個端口，輸入：node server.js）

const ws = require('nodejs-websocket')
ws.createServer(function (conn) {
    conn.on('text', function (data) { // 收到客戶端數(shù)據(jù)的回調方法 
        conn.sendText(data) // 把客服端發(fā)送過來的信息再發(fā)回去
    })
    conn.on('close', function (e) { // 關閉服務器的回調方法
        console.log(e, '服務端連接關閉')
    })
    conn.on('error', function (e) { // 服務端連接異常的回調方法
        console.log(e, '服務端異常')
    })
}).listen(8181) // 監(jiān)聽8181端口，跟客戶端連接端口對應
console.log('服務端已開啟')

代碼放上去后，啟動服務端，終端顯示：服務端已開啟；頁面將彈出：你好服務器。說明websocket連接成功，恭喜你，完成了websocket的雙向通信！

到此這篇關于websocket結合node.js實現(xiàn)雙向通信的示例代碼的文章就介紹到這了,更多相關websocket node.js雙向通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: