iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Software Development

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

Day 13 - 應用篇 - 建構WebSocket聊天室(Server端)

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

Server端有以下的功能:

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

本文延續Day12的專案,因此請先閱讀並完成Day12的內容。

專案開發

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

//Step1:匯入套件與初始化變數
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const users = new Map(); //儲存 Socket id 對應到的使用者名稱

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

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

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('join', (name) => { //Client發送join事件後,進入此監聽事件
        users.set(socket.id, name); //儲存Socket id與使用者名稱
        io.emit('new member', name); //向所有人發送new member事件,以傳遞新成員通知
    });

    socket.on('message', (name, msg) => { //Client發送message事件後,進入此監聽事件
        io.emit('new message', name, msg); //向所有人發送new message事件,以傳遞新訊息
    });

    socket.on('disconnect', () => { //Client與Socket Server斷線後,進入此監聽事件
        console.log(`${socket.id} disconnected`);

        const name = users.get(socket.id); //取得Socket id對應的使用者名稱
        io.emit('member leave', name); //向所有人發送member leave事件,以傳遞成員離開通知
    });
});
  • Step1:匯入相關套件與初始化變數,而專案中主要使用Express與Socket.IO套件。
  • Step2:設定伺服器的路由,而伺服器會使用3001的port號,當伺服器啟動後連線至localhost:3001,便會回傳index.html檔案及其他匯入的檔案。
  • Step3:設定Socket Server的監聽事件,讓Client可進行連線與即時通訊。

執行結果

專案執行步驟

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

node server.js

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

Express https server listening on port 3001

接著,開啟瀏覽器後輸入以下網址,就能看到聊天室系統囉!

localhost:3001

使用者名稱輸入

看到聊天室系統後,會先顯示一個視窗讓使用者輸入名稱。

使用者名稱輸入後

使用者名稱輸入後,便會加入聊天室並顯示新成員加入的通知,我們可在下方輸入訊息並傳送。

聊天室訊息傳遞

使用瀏覽器開啟兩個聊天室系統,並輸入使用者名稱後,即可互相傳遞訊息,若有人離開,則顯示成員離開的通知。如下圖所示,Joe與Allen只有發送訊息,並沒有做其他的事情,就能一直接收對方所傳遞的訊息,這就是Socket的力量啊!

聊天室新訊息置底

當收到新的訊息時,系統會自動滾動置底。

使用者名稱輸入失敗

若不輸入使用者名稱會提示使用者。


上一篇
Day 12 - 應用篇 - 建構WebSocket聊天室(Client端)
下一篇
Day 14 - 觀念篇 - WebRTC協商流程
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言