websocket結(jié)合node.js實(shí)現(xiàn)雙向通信的示例代碼
首先我們需要了解,什么是websocket,它的作用和優(yōu)勢(shì)是什么,為什么要用它。
什么是websocket?
websocket是基于TCP的一種雙向通信協(xié)議。在此之前,一直是采用輪詢的方式進(jìn)行雙向通信,這種方式效率低下還非常浪費(fèi)資源。為了解決這種問(wèn)題,websocket應(yīng)運(yùn)而生。
特點(diǎn):
雙向通信
websocket使得客戶端跟服務(wù)端之間交換數(shù)據(jù)變得更加簡(jiǎn)單。允許服務(wù)器主動(dòng)向客戶端推送數(shù)據(jù)。瀏覽器只需要和服務(wù)器完成一次握手,就可以創(chuàng)建持久性的連接,并進(jìn)行雙向數(shù)據(jù)傳輸。
實(shí)時(shí)性強(qiáng)
服務(wù)器可以主動(dòng)給客戶端推送數(shù)據(jù),相比http請(qǐng)求需要先由客戶端發(fā)起請(qǐng)求,瀏覽器才會(huì)響應(yīng),延遲明顯更少、時(shí)間更短。
連接保持
websocket連接創(chuàng)建成功后,只要連接不斷開(kāi),通信會(huì)一直保持,而且還會(huì)省略部分狀態(tài)信息(http請(qǐng)求可能每次請(qǐng)求都需要攜帶狀態(tài)信息)
相對(duì)于http,websocket優(yōu)勢(shì)顯而易見(jiàn)。所以在一些實(shí)時(shí)通信上,都需要用到websocket,比如多媒體聊天、玩家游戲、頁(yè)面局部刷新、協(xié)同編輯等場(chǎng)景。
介紹完了什么是websocket,下面介紹下如何使用websocket。
WebSocket 的用法很簡(jiǎn)單:
var ws = new WebSocket("ws://localhost:8181");
// 指定連接成功后的回調(diào)函數(shù)
ws.onopen = function() { ?
// 向服務(wù)器發(fā)送數(shù)據(jù),數(shù)據(jù)類型包括文本類型/blob對(duì)象/ArrayBuffer對(duì)象
? ws.send("Hello WebSockets!");?
};
// 指定收到服務(wù)端數(shù)據(jù)后的回調(diào)函數(shù)
(注意:返回?cái)?shù)據(jù)可能是文本,也可能是二進(jìn)制數(shù)據(jù)(blob對(duì)象或Arraybuffer對(duì)象))
ws.onmessage = function(e) {
? console.log( "收到服務(wù)端信息: " + e.data);
? ws.close(); // 關(guān)閉websocket連接方法
};
// 指定連接關(guān)閉后的回調(diào)函數(shù)
ws.onclose = function() {
? console.log("連接已關(guān)閉");
}; ? ?然后是服務(wù)端,服務(wù)端需要下載nodejs-websocket:
npm i nodejs-websocket
nodejs-websocket文檔地址 這個(gè)文檔里詳細(xì)描述了如何使用,這里不做贅述。直接上代碼展示雙方通信效果:
客戶端:
(這里使用了vue框架搭建項(xiàng)目,把該方法放進(jìn)vue頁(yè)面即可,多余代碼不再多寫)
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('連接服務(wù)器成功')
ws.socket.send('你好服務(wù)器')
}
ws.onmessage = function (e) {
alert(e.data)
}
ws.onclose = function () {
console.log('連接已關(guān)閉')
}
} else {
console.log('當(dāng)前瀏覽器不支持WebSocket!')
}
}
}
}服務(wù)端:
(這里是命名為server.js的文件,放在了vue項(xiàng)目的根目錄,啟動(dòng)時(shí)候需要啟動(dòng)node服務(wù),終端拆分一個(gè)端口,輸入:node server.js)
const ws = require('nodejs-websocket')
ws.createServer(function (conn) {
conn.on('text', function (data) { // 收到客戶端數(shù)據(jù)的回調(diào)方法
conn.sendText(data) // 把客服端發(fā)送過(guò)來(lái)的信息再發(fā)回去
})
conn.on('close', function (e) { // 關(guān)閉服務(wù)器的回調(diào)方法
console.log(e, '服務(wù)端連接關(guān)閉')
})
conn.on('error', function (e) { // 服務(wù)端連接異常的回調(diào)方法
console.log(e, '服務(wù)端異常')
})
}).listen(8181) // 監(jiān)聽(tīng)8181端口,跟客戶端連接端口對(duì)應(yīng)
console.log('服務(wù)端已開(kāi)啟')
代碼放上去后,啟動(dòng)服務(wù)端,終端顯示:服務(wù)端已開(kāi)啟;頁(yè)面將彈出:你好服務(wù)器。說(shuō)明websocket連接成功,恭喜你,完成了websocket的雙向通信!
到此這篇關(guān)于websocket結(jié)合node.js實(shí)現(xiàn)雙向通信的示例代碼的文章就介紹到這了,更多相關(guān)websocket node.js雙向通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
快速掌握Node.js環(huán)境的安裝與運(yùn)行方法
這篇文章主要介紹了Node.js環(huán)境的安裝與運(yùn)行方法,Node是基于Google Chrome V8引擎的JavaScript解釋器,需要的朋友可以參考下2016-02-02
如何使用Node.js爬取任意網(wǎng)頁(yè)資源并輸出PDF文件到本地
這篇文章主要介紹了使用Node.js爬取任意網(wǎng)頁(yè)資源并輸出高質(zhì)量PDF文件到本地,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面小編就來(lái)和大家一起學(xué)習(xí)吧2019-06-06
node異步使用await和不用await的區(qū)別實(shí)例分析
這篇文章主要介紹了node異步使用await和不用await的區(qū)別,結(jié)合實(shí)例形式分析了node.js異步使用await和不用await的實(shí)例中,同步與異步執(zhí)行的區(qū)別,需要的朋友可以參考下2023-06-06
koa大型web項(xiàng)目中使用路由裝飾器的方法示例
這篇文章主要介紹了koa大型web項(xiàng)目中使用路由裝飾器的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
node.JS的crypto加密模塊使用方法詳解(MD5,AES,Hmac,Diffie-Hellman加密)
本文將詳細(xì)介紹node.JS的加密模塊crypto實(shí)現(xiàn)MD5,AES,Hmac,Diffie-Hellman加密的詳解方法,需要的朋友可以參考下2020-02-02

