摘要:的總結(jié)在一個(gè)聊天室系統(tǒng)中,常常使用作為通信的主要方式。服務(wù)端對(duì)客戶端所發(fā)送的請(qǐng)求進(jìn)行處理登陸驗(yàn)證等操作在這里,通過(guò)來(lái)接受客戶端所傳遞的數(shù)據(jù),為相同方法名,其后跟的函數(shù)為登陸驗(yàn)證的具體操作,比如用戶驗(yàn)證是否存在。
websocket的總結(jié)
在一個(gè)聊天室系統(tǒng)中,常常使用websocket作為通信的主要方式。
參考地址:https://www.jianshu.com/p/00e...
關(guān)于自己的看法:
websocket協(xié)議是一種新的tcp協(xié)議,與常用的http協(xié)議不同的地方在于,無(wú)論是客戶端還是服務(wù)端,都能進(jìn)行自由通信,雙方都比較靈活,不會(huì)有局限性。
文中所提到的socket.io包是封裝有websocket協(xié)議的包,他包含不少服務(wù)端處理的代碼,兼容性強(qiáng),主要服務(wù)于實(shí)時(shí)通信。
開(kāi)始之前,需要構(gòu)建網(wǎng)絡(luò)服務(wù),主要用到的包就是socket.io和http服務(wù)的包,由于是node的后臺(tái),所以需要設(shè)置一個(gè)進(jìn)行監(jiān)聽(tīng)的端口,方便在瀏覽器中調(diào)試。
/*app.js*/ /*構(gòu)建http服務(wù)*/ var app = require("http").createServer() /*引入socket.io*/ var io = require("socket.io")(app); /*定義監(jiān)聽(tīng)端口,可以自定義,端口不要被占用*/ var PORT = 8081; /*監(jiān)聽(tīng)端口*/ app.listen(PORT);
后臺(tái)系統(tǒng)為nodejs搭載
主要應(yīng)用在聊天系統(tǒng)中socket.io中的方法:
socket.emit()
socket.on()
io.sockets.emit()
對(duì)于第一種,socket.emit()方法主要是在客戶端和服務(wù)端之間進(jìn)行信息請(qǐng)求,例如客戶端向服務(wù)端發(fā)送請(qǐng)求或者服務(wù)端向客戶端進(jìn)行反饋請(qǐng)求,這兩種情況下主要用到的方法。
需求場(chǎng)景:客戶端上,用戶輸入賬號(hào)密碼進(jìn)行登陸,服務(wù)端怎么識(shí)別?
(1)首先是客戶端獲取到用戶在輸入框中的信息,然后對(duì)服務(wù)端進(jìn)行發(fā)送信息。
socket.emit("login",{username:uname})
代碼塊中,login為自定義方法名,其后是傳送的數(shù)據(jù),項(xiàng)目中只考慮到用戶名的輸入,所以保存為一個(gè)對(duì)象發(fā)送給服務(wù)端,這里用到了socket.emit()方法,是客戶端----->服務(wù)端的請(qǐng)求。
(2)服務(wù)端對(duì)客戶端所發(fā)送的請(qǐng)求進(jìn)行處理
socket.on("login",function(data){ /*登陸驗(yàn)證等操作*/ })
在這里,通過(guò)socket.on來(lái)接受客戶端所傳遞的數(shù)據(jù),為相同方法名,其后跟的function函數(shù)為登陸驗(yàn)證的具體操作,比如用戶驗(yàn)證是否存在。
(3)服務(wù)端驗(yàn)證成功了,把反饋信息發(fā)送給客戶端。
通過(guò)上面知道,一端向另一端發(fā)送請(qǐng)求的時(shí)候,需要用到socket.emit()方法,但是這次是服務(wù)端向客戶端進(jìn)行發(fā)送消息。
socket.emit("loginSuccess",data)
這里,把之前客戶端所發(fā)送的請(qǐng)求,再次返回去,讓客戶端進(jìn)行操作。
(4)客戶端接收返回結(jié)果
接收的方法,還是socket.on(),不過(guò)這次是客戶端接收服務(wù)端所傳遞回來(lái)的信息。
socket.on("loginSuccess",function(data){ if(data.username === uname){ checkin(data) }else{ alert("用戶名不匹配,請(qǐng)重試") } }) function checkin(data){ /*隱藏登陸界面,顯示聊天主頁(yè)*/ $(".login-wrap").hide("slow"); $(".chat-wrap").show("slow"); }
通過(guò)以上4步,一次成功的登陸請(qǐng)求就成功了。
關(guān)于全頻道廣播功能
項(xiàng)目中提到了全頻道的廣播的功能,而io.sockets.emit的定義是服務(wù)端進(jìn)行全頻道廣播,也就是對(duì)所有客戶端進(jìn)行廣播,也跟我們常常在聊天中收到的官方推送一樣。
io.sockets.emit("leave",username)
當(dāng)用戶進(jìn)入或者離開(kāi)時(shí),會(huì)進(jìn)行全頻道廣播,也就是通過(guò)io.sockets.emit方法進(jìn)行。
最后感謝@一岑不再博主所寫(xiě)的demo項(xiàng)目,讓我受益匪淺。
一岑博主主要文章傳送門(mén):鏈接描述
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/95768.html
摘要:思路這個(gè)分為客戶端,控制端和服務(wù)端。客戶端是一個(gè)用寫(xiě)的三維的長(zhǎng)方體,只接受數(shù)據(jù)。控制端使用事件來(lái)獲取手機(jī)姿態(tài)并通過(guò)發(fā)送姿態(tài)數(shù)據(jù)。附之前寫(xiě)過(guò)兩篇文章是關(guān)于用制作立方體和使用搭建聊天室對(duì)本文有點(diǎn)借鑒意義。 思路 這個(gè) Demo 分為客戶端,控制端和服務(wù)端。客戶端是一個(gè)用css3寫(xiě)的三維的長(zhǎng)方體,只接受websocket數(shù)據(jù)。控制端使用deviceorientation事件來(lái)獲取手機(jī)姿態(tài)并通...
摘要:思路這個(gè)分為客戶端,控制端和服務(wù)端。客戶端是一個(gè)用寫(xiě)的三維的長(zhǎng)方體,只接受數(shù)據(jù)。控制端使用事件來(lái)獲取手機(jī)姿態(tài)并通過(guò)發(fā)送姿態(tài)數(shù)據(jù)。附之前寫(xiě)過(guò)兩篇文章是關(guān)于用制作立方體和使用搭建聊天室對(duì)本文有點(diǎn)借鑒意義。 思路 這個(gè) Demo 分為客戶端,控制端和服務(wù)端。客戶端是一個(gè)用css3寫(xiě)的三維的長(zhǎng)方體,只接受websocket數(shù)據(jù)。控制端使用deviceorientation事件來(lái)獲取手機(jī)姿態(tài)并通...
閱讀 2506·2021-10-14 09:42
閱讀 1148·2021-09-22 15:09
閱讀 3552·2021-09-09 09:33
閱讀 3035·2021-09-07 09:59
閱讀 3648·2021-09-03 10:34
閱讀 3547·2021-07-26 22:01
閱讀 2829·2019-08-30 13:06
閱讀 1214·2019-08-30 10:48