簡單的后臺服務(wù)搭建流程
- 創(chuàng)建一個文件夾
websocket-server - 終端執(zhí)行
cd命令進(jìn)入到websocket-server文件夾 - 執(zhí)行
yarn add nodejs-websocket或npm install nodejs-websocket,用以安裝nodejs的websocket模塊 - 待模塊安裝完成后丢间，在當(dāng)前目錄新建app.js文件
-
簡單代碼如下
- 創(chuàng)建服務(wù)的過程和使用
http模塊創(chuàng)建服務(wù)的過程類似，終端執(zhí)行node app.js,可以看到終端打印出，監(jiān)聽了端口3000，這樣一個簡單的websocket后臺服務(wù)就創(chuàng)建完了。
前端與websocket服務(wù)建立連接
- 在當(dāng)前目錄下創(chuàng)建index.html文件
- 在
body標(biāo)簽中寫入代碼
- 在
script標(biāo)簽中寫入如下代碼獲取dom元素
-
如下為websocket的事件API
-
前端創(chuàng)建一個websocket連接舅踪，并監(jiān)聽websocket的open事件
這里的地址不是http協(xié)議茧痒，而是websocket
- 用vscode的live server 打開index.html文件绕沈，看到瀏覽器如下
這標(biāo)志著我們與后端的websocket服務(wù)成功建立了連接锐想，這時打開開發(fā)人員工具
可以在圖示位置看到我們與后端websocket建立的連接
在往下進(jìn)行之前，要先對后端的代碼進(jìn)行一些異常處理乍狐，不然我們每次頁面一刷新赠摇，后端會直接報錯并停掉服務(wù)。
在app.js文件中添加如下代碼
這兩段代碼分別是對連接關(guān)閉時和異常的事件進(jìn)行處理浅蚪，對兩個事件進(jìn)行處理之后藕帜，我們前端進(jìn)行訪問才不會報錯
前后端數(shù)據(jù)交互
- 在
button上監(jiān)聽一個點(diǎn)擊事件，調(diào)用websocket的send()方法向后端發(fā)送input的內(nèi)容
- 點(diǎn)擊按鈕惜傲，打開控制臺洽故，可以看到我們發(fā)送的數(shù)據(jù)
-
后端接收數(shù)據(jù)處理，并返回給前端
- 接受到前端發(fā)送的數(shù)據(jù)后操漠，將字母轉(zhuǎn)為大寫返回給前端
前端代碼添加如下邏輯
-
input輸入內(nèi)容收津，點(diǎn)擊按鈕饿这，效果如下圖
紅色內(nèi)容為后端返回的內(nèi)容浊伙，綠色內(nèi)容為我們發(fā)送給后端的內(nèi)容。
至此长捧，一個簡單的websocket服務(wù)和前后端交互邏輯就完成了嚣鄙。
前端完整代碼
后端完整代碼
