Websocket / Socket.IO

Websocket

Websocket是Html5的一種網路協定，用於前端瀏覽器(Client)與後端(Server)的溝通，協定只需要連線一次，除非有一方斷開連接，否則就會一直存在，不需重複請求，常用實作於聊天室、訊息推播、共同編輯上。

Socket.IO 一套 JavaScript 函式庫工具包

當時一些瀏覽器還不支持websocket協議的時候。socket.io會改選擇使用傳統的long polling方式運作。如果支援的話則會用websocket的協議。

安裝 socket IO 和 socket IO Client版

socket.io：node.js http server 使用
socket.io-client： client 瀏覽器端 使用
安裝指令：
npm i -D socket.io socket.io-client

使用方法

Server 端	建立連線/事件傳送方向	Client 端
io.on(‘connection’, (socket) => {…})	建立連線	socket = io(“socket ip:port”)
io.emit(“要對 所有 Client 廣播的事件名稱”, data)	———>	socket.on(“來自client 的事件名稱”, callback)
socket.emit(“要對 當前連線 的 Client 發送的事件名稱”, data)	———>	socket.on(“來自client 的事件名稱”, callback)
socket.on(“來自client 的事件名稱”, callback)	<———	socket.emit(“要對 server 發送的事件名稱”,data)

Cheatsheet

socket.emit('message', "this is a test"); 
//sending to sender-client only

socket.broadcast.emit('message', "this is a test"); 
//sending to all clients except sender

socket.broadcast.to('game').emit('message', 'nice game'); 
//sending to all clients in 'game' room(channel) except sender

socket.to('game').emit('message', 'enjoy the game'); 
//sending to sender client, only if they are in 'game' room(channel)

socket.broadcast.to(socketID).emit('message', 'for your eyes only'); 
//sending to individual socketID

io.emit('message', "this is a test"); 
//sending to all clients, include sender

io.in('game').emit('message', 'cool game'); 
//sending to all clients in 'game' room(channel), include sender

io.of('myNamespace').emit('message', 'gg'); 
//sending to all clients in namespace 'myNamespace', include sender

socket.emit(); 
//send to all connected clients

socket.broadcast.emit(); 
//send to all connected clients except the one that sent the message

socket.on(); 
//event listener, can be called on client to execute on server

io.sockets.socket(); 
//for emiting to specific clients

io.sockets.emit(); 
//send to all connected clients (same as socket.emit)

io.sockets.on() ; 
//initial connection from a client.

• 整理來源：用 Socket.io 做一個即時聊天室吧！（直播筆記）

Server端

如何建立連接

• https://socket.io/docs/v4/tutorial/step-3
  引入 Server 到 index.ts

import express from 'express';
import { createServer } from 'node:http';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';
import { Server } from 'socket.io';

const app = express();
const server = createServer(app);
const io = new Server(server);

const __dirname = dirname(fileURLToPath(import.meta.url));

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

server.listen(3000, () => {
  console.log('server running at http://localhost:3000');
});

//建立連線
io.on("connection", (socket) => {
  // emit發送訊息給所有人
  socket.emit('userID', socket.id); 

  // socket.on 接收join這個頻道的資訊
  socket.on("join", ({ userName, roomName }) => {
    const userData = userService.userDataInfoHandler(
      socket.id,
      userName,
      roomName
    );
    userService.addUser(userData);
    socket.join(userData.roomName);

    // socket.broadcast 發送給所有人 .to指定在哪個頻道 .emit發送
    socket.broadcast.to(userData.roomName).emit("join", `${userData.userName} joined ${userData.roomName}`);
  });

  // socket.on 接收chat這個頻道的資訊 msg
  socket.on("chat", (msg) => {
    const time = moment.utc();
    const userData = userService.getUser(socket.id);
    if(userData){ 
      // .to指定在哪個頻道 .emit發送
      io.to(userData.roomName).emit("chat", {userData, msg, time});
    }
  });

  // disconnect 離線
  socket.on("disconnect", () => {
    const userData = userService.getUser(socket.id);
    if (userData?.userName) {
      socket.broadcast.to(userData.roomName).emit("leave", `${userData.userName} left ${userData.roomName}`);
    }
    userService.removeUser(socket.id);
  });
});

Client端

import { io } from "socket.io-client";

//1. 建立連接
const clientIo = io();

// 開啟join這個頻道 傳送userName, roomName給server
clientIo.emit("join", { userName, roomName });

// 開啟join這個頻道 接收server傳過來的msg並進行處理
clientIo.on("join", (msg: string) => {
  roomMsgHandler(msg);
});

submitBtn.addEventListener("click", () => {
  const textValue = textInput.value;
  // 傳送msg到chat這個頻道給server
  clientIo.emit("chat", textValue);
});

// 開啟chat這個頻道 接收server傳過來的data 並進行處理
clientIo.on("chat", (data) => {
  msgHandler(data);
});


clientIo.on("leave", (msg: string) => {
  roomMsgHandler(msg);
});

clientIo.on("userID", (id) => {
  userID = id;
});

參考資料

• 淺談 WebSocket 協定：實作一個簡單的即時聊天室吧！
• 【筆記】Socket，Websocket，Socket.io的差異
• WebSocket 基本介紹及使用筆記
• 用 Socket.io 做一個即時聊天室吧！（直播筆記）