iT邦幫忙

2021 iThome 鐵人賽

DAY 17
1
Software Development

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

Day 17 - 應用篇 - 建構WebRTC網路電話(Server端)

上一篇完成Client端的程式碼,而本篇我們要打造系統的Server端。

Server端有以下的功能:

  • 提供API讓使用者取得網路電話系統的網頁。
  • 提供Socket連線服務讓使用者進行即時通訊。

專案開發

開啟server.js檔案,並撰寫以下程式碼。

//Step1:匯入套件與初始化變數
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
let creator = '';
let joiner = '';

//Step2:設定伺服器路由
app.use(express.static('./'));

server.listen(3001, function() {
    console.log('Express https server listening on port 3001');
});

//Step3:設定Socket Server的監聽事件
io.on('connection', (socket) => { //Client連線至Socket Server後,進入此監聽事件
    console.log(`${socket.id} connected`);

    socket.on('create', () => { //Creator發送create事件後,進入此監聽事件
        console.log(`${socket.id} create`);

        //判斷通話是否未建立
        if (creator === '') {
            creator = socket.id;
        } else {
            io.to(socket.id).emit('call established');
        }
    });

    socket.on('join', () => { //Joiner發送join事件後,進入此監聽事件
        console.log(`${socket.id} join`);

        //判斷通話是否已建立
        if (creator !== '') {
            joiner = socket.id;
            io.emit('start'); //向所有人發送start事件,以開始通話
        } else {
            io.to(socket.id).emit('call not established');
        }
    });
});

執行結果

專案執行步驟

Step1 執行專案

程式碼撰寫完成後,我們在專案路徑下開啟終端機,並輸入以下指令將Server啟動。

node server.js

若在終端機看到以下的訊息,表示成功啟動Server。

Express https server listening on port 3001

Step2 查看結果

開啟瀏覽器後輸入以下網址,就能看到網路電話系統囉!

localhost:3001

向使用者請求權限

向使用者請求權限後,瀏覽器會顯示是否允許的視窗,允許後就會顯示自己的視訊影像。

視訊通話

雙方都進入通話後,就會進行視訊通話。但如果無法通話,那就必須架設擁有TURN協議的Server,這個部分會於下一篇進行說明。

結束通話

當一方結束通話,另一方會顯示對方已結束通話的訊息。


上一篇
Day 16 - 應用篇 - 建構WebRTC網路電話(Client端)
下一篇
Day 18 - 應用篇 - 搭建ICE Server
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言