WebSocket-簡易server端實作

server 端環境建置

首先,創立一個簡易的 WebSocket 資料夾專案,裡面有一個 index.js 檔案,以及一個 server 資料夾

1
2
3
WebSocket
|--index.html
|--server(forder)

啟用 terminal,進入 WebSocket 專案資料夾中做初始化設定:

1
npm init

接著,系統執行過程中,會被要求輸入幾個欄位(可以直接按 enter 略過到下一個欄位)

  • package name: 你這個 Project 要叫什麼名字
  • version: 你決定這個 Project 現在該是第幾版
  • description: Project 基本介紹
  • entry point: 進入點,如果要跑你的 Project 應該要執行哪個檔案
  • test command:
  • git repository:
  • keywords:
  • author: 作者(自己)
  • license: 你這個 Project 是採用什麼授權的

結束後,可以看到 server 這個資料夾底下,自動產生了一個 Package.json

接著,在 server 資料夾中,手動新增 index.js 檔案

1
2
3
4
5
WebSocket
|--index.html
|--server(forder)
|-package.json
|-index.js

資料架構建置完,接著要在其中安裝 WebSocket:

1
npm install ws


安裝完畢後,專案結構中會多出幾個檔案及資料夾,package-lock.json 中紀錄安裝套件相容的版本。

到目前為止,基本的環境建置完成。

建置後端 server

這裡示範模擬 server,以本機端 5001 埠,作為配置 server 的接口。
在資料夾中的 index.js 檔案中,寫入以下程式碼:

1
2
3
4
5
6
7
8
9
10
//導入WebSocket模組
var WebSocket = require('ws');

//引用Server類
var WebSocketServer = WebSocket.Server;

//建立實體(實例化)
var wss = new WebSocketServer({
port: 5001,
});

也可以將上述三行程式碼,簡易化為下述兩行寫法

1
2
3
4
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({
port: 5001,
});

啟用 Server

「control + ` 」快捷鍵開啟 vscode 中的終端機。在終端機可以先確認當前位置,用下述指令進入 server 資料夾中:

1
cd server

在 server 中,輸入下述指令,啟用 server

1
node index.js

這樣的狀態就代表 server 正在運轉啟用中

為了確認 server 為啟動狀態,可以由前端測試是否可以連接上後端。
在專案中的 index.html 檔案代表前端(用戶端),在其中輸入指令,透過 server 端的 port:5001 接口,讓前端與後端建立連結:

1
2
3
4
5
6
7
8
9
10
var sock = new WebSocket('ws://localhost:5001');
sock.onopen = function(event) {
//當為連結狀態,執行下述動作
console.log('Connected successfully!');

//製造ㄧ秒時間差,再傳送訊息給server
setTimeout(function() {
sock.send('Hey there');
}, 1000);
};

啟用瀏覽器 locolhost:,查看開發工具 network,可以看到順利連結上 server,並執行從瀏覽器傳送訊息給 server 端。

server 端偵聽事件

首先建立 WebSocket 的 server 實體,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//先引用Server類
//再new出實體,並asign給wss變數
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 5001 });

//當偵聽到連結建立時,執行動作
wss.on('connection', function(ws) {
console.log('Connected!');

//當偵測收到訊息時,執行動作
ws.on('message', function(message) {
console.log('Receieve:' + message);
});
});

用 vsCode 打開 terminal 查看 sever 端的 log 訊息,可以檢查看到確實有執行動作。

Server 端回傳訊息給前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
wss.on('connection', function(ws) {
console.log('Connected!');

//當偵測收到訊息時,執行動作
ws.on('message', function(message) {
console.log('Receieve:' + message);

if (message == 'Hello') {
//從server回送訊息給前端
ws.send('Hey there from the server');
console.log('1');
} else {
ws.send('what did you say?');
console.log('2');
}
});
});

從瀏覽器的開發工具 NetWork>WS 可以檢查到前、後端訊息傳遞的狀況。

© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero