iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Software Development

新手也能打造網路電話系統-WebRTC入門與活用系列 第 10

Day 10 - 觀念篇 - WebSocket

Day 04 - 觀念篇 - Session Description Protocol的時候,我們了解到在傳遞SDP的時候需要藉由一些通訊方式來完成,而WebSocket就是其中一項通訊方式,因此今天要介紹WebSocket,並在後續章節實作聊天室的功能,讓大家先了解WebSocket的使用方式,之後在實際建構WebRTC網路電話時才能更得心應手。

WebSocket

WebSocket是一種以維持長時間連線的方式,使前後端進行雙向通訊之協議,雙方只需完成一次交握(Handshake)後,並明確地定義事件(Event),即可進行即時通訊,且通訊過程可附帶任意類型的資料,達到資料傳遞之目的。因上述之特性,WebSocket常用於需要即時通訊的場合,例如:線上遊戲、通訊軟體,而本系列文章會採用Socket.IO框架以實作WebSocket。

Socket.IO

Socket.IO是一套能使前後端進行雙向通訊的JavaScript框架,其擁有易於使用、前後端API一致、群組化管理客戶端、自動選擇合適協定、具備斷線重連,以及圖形化管理後台等特性與功能,使開發者得以快速建立完整服務,以下說明Socket.IO的基本使用流程:

https://ithelp.ithome.com.tw/upload/images/20210923/20118188YBnDGF9OS5.png

流程大致分為三個部分:
( 1 ) 連線建立:客戶端使用Socket.IO指定伺服器網址,以連線至已建立Socket.IO之伺服器,經過伺服器的身份驗證後,客戶端與伺服器端便會建立連線。
( 2 ) 事件傳遞:建立連線之前後端可雙向傳遞事件,在傳遞前須設定監聽(Listen)事件,以接收對方所發送(Emit)的事件,事件可附帶資料一併傳遞給對方。
( 3 ) 連線終止:Socket.IO主要採用WebSocket協議,因此雙方會維持長時間的連線,直到客戶端或伺服器端主動終止連線。

API語法介紹

本節會介紹Socket.IO的基本API語法,讓大家先有個初步的認識,想了解更多內容可參考官方文件,後續章節會利用它們實作聊天室的功能。

io(url, object):用於讓前端設定Socket的連線配置,其會回傳Socket物件。

  • 第1個參數為Socket Server的網址,類型為字串。
  • 第2個參數為Socket連線的其他設定,類型為物件。
const socket = io(url, {
  'reconnection': false, //關閉重連機制
  'autoConnect': false //關閉自動連線
});

socket.connect():若將自動連線關閉,前端須使用此方法連線至Socket Server。

socket.disconnect():用於前端主動終止連線。

emit(event, args, callback):用於向前端或後端發送事件。

socket.emit("start"); //單純發送事件
socket.emit("start", data); //發送事件與資料
socket.emit("start", data1, data2, data3); //發送事件與使用其餘參數建立多個資料
socket.emit("start", data1, data2, data3, (callback) => { //發送事件、資料與回調函式
    console.log(callback); //顯示另一方傳入回調函式的資料
});

發送事件的對象除了可以是當前連線至伺服器的前端,也可以是所有的連線者,而如何設定對象可以參考官方文件。

on(event, args, callback):用於監聽前端或後端發送的事件。

socket.on("start", () => { //監聽事件
});

socket.on("start", (data) => { //監聽事件與取得對方發送的資料
});

socket.on("start", (data1, data2, data3) => { //監聽事件與取得對方發送的多個資料
});

socket.on("start", (data1, data2, data3, callback) => { //監聽事件、取得資料與回調函式
    callback("receive"); //向回調函式傳入資料
});

//connect、disconnect為Socket.IO保留的事件名稱
socket.on("connect", () => { //當成功連線至Socket Server時,觸發此監聽事件
    console.log(socket.id); //成功連線後,產生一組唯一識別標籤
});

除了on方法之外,還有一個與其用法類似的once方法,差別在於once只會監聽一次事件,之後便不再監聽。


上一篇
Day 09 - 應用篇 - 使用者音視訊控制(2)
下一篇
Day 11 - 應用篇 - 建構WebSocket聊天室(架構總覽)
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言