WebSocket-簡易server端實作

Posted on June 12, 2019 本文总阅读量次

server 端環境建置

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

1
2
3

WebSocket
|--index.html
|--server（forder）

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

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 檔案

WebSocket
|--index.html
|--server（forder）
    |-package.json
    |-index.js

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

1	npm install ws

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

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

建置後端 server

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

//導入WebSocket模組
var WebSocket = require('ws');

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

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

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

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

啟用 Server

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

cd server

在 server 中，輸入下述指令，啟用 server：

1	node index.js

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

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

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 實體，

//先引用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 端回傳訊息給前端

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 可以檢查到前、後端訊息傳遞的狀況。