React | 在 React 中使用 WebSocket - feat. Socket.io 基本教學

const express = require('express')
const app = express()

//將 express 放進 http 中開啟 Server 的 3000 port ，正確開啟後會在 console 中印出訊息
const server = require('http').Server(app)
    .listen(3000,()=>{console.log('open server!')})

//將啟動的 Server 送給 socket.io 處理
const io = require('socket.io')(server)

/*上方為此寫法的簡寫：
  const socket = require('socket.io')
  const io = socket(server)
*/

//監聽 Server 連線後的所有事件，並捕捉事件 socket 執行
io.on('connection', socket => {
    //經過連線後在 console 中印出訊息
    console.log('success connect!')
    //監聽透過 connection 傳進來的事件
    socket.on('getMessage', message => {
        //回傳 message 給發送訊息的 Client
        socket.emit('getMessage', message)
    })
})

import React, { useState, useEffect } from 'react'
import ReactDom from 'react-dom'
import webSocket from 'socket.io-client'

const Main = () => {
    const [ws,setWs] = useState(null)

    const connectWebSocket = () => {
        //開啟
        setWs(webSocket('http://localhost:3000'))
    }

    useEffect(()=>{
        if(ws){
            //連線成功在 console 中打印訊息
            console.log('success connect!')
            //設定監聽
            initWebSocket()
        }
    },[ws])

    const initWebSocket = () => {
        //對 getMessage 設定監聽，如果 server 有透過 getMessage 傳送訊息，將會在此被捕捉
        ws.on('getMessage', message => {
            console.log(message)
        })
    }

    const sendMessage = () => {
        //以 emit 送訊息，並以 getMessage 為名稱送給 server 捕捉
        ws.emit('getMessage', '只回傳給發送訊息的 client')
    }

    return(
        <div>
            <input type='button' value='連線' onClick={connectWebSocket} />
            <input type='button' value='送出訊息' onClick={sendMessage} />
        </div>
    )
}

ReactDom.render(<Main />, document.getElementById('root'))

/*只回傳給發送訊息的 client*/
socket.emit('getMessage', message)

/*回傳給所有連結著的 client*/
io.sockets.emit('getMessageAll', message)

/*回傳給除了發送者外所有連結著的 client*/
socket.broadcast.emit('getMessageLess', message)

io.on('connection', socket => {
  
    /*只回傳給發送訊息的 client*/
    socket.on('getMessage', message => {
        socket.emit('getMessage', message)
    })

    /*回傳給所有連結著的 client*/
    socket.on('getMessageAll', message => {
        io.sockets.emit('getMessageAll', message)
    })

    /*回傳給除了發送者外所有連結著的 client*/
    socket.on('getMessageLess', message => {
        socket.broadcast.emit('getMessageLess', message)
    })
  
})

const initWebSocket = () => {
    //對 getMessage 設定監聽，如果 server 有透過 getMessage 傳送訊息，將會在此被捕捉
    ws.on('getMessage', message => {
        console.log(message)
    })
    ws.on('getMessageAll', message => {
        console.log(message)
    })
    ws.on('getMessageLess', message => {
        console.log(message)
    })
}

const sendMessage = (name) => {
    ws.emit(name, '收到訊息囉！')
}

return (
    <div>
        <input type='button' value='連線' onClick={connectWebSocket} />
        <input type='button' value='送出訊息，只有自己收到回傳' onClick={() => { sendMessage('getMessage') }} />
        <input type='button' value='送出訊息，讓所有人收到回傳' onClick={() => { sendMessage('getMessageAll') }} />
        <input type='button' value='送出訊息，除了自己外所有人收到回傳' onClick={() => { sendMessage('getMessageLess') }} />
    </div>
)

const initWebSocket = () => {
  
    /*其餘程式碼省略*/
  
    //增加監聽
    ws.on('addRoom', message => {
        console.log(message)
    })
}

//選擇聊天室時觸發，如果有選擇那就將房間 id 送給 Server
const changeRoom = (event) => {
    let room = event.target.value
    if(room !== ''){
        ws.emit('addRoom', room)
    }
}

return (
    <div>
        //增加下拉選單選擇房間
        <select onChange={changeRoom}>
            <option value=''>請選擇房間</option>
            <option value='room1'>房間一</option>
            <option value='room2'>房間二</option>
        </select>
        
        {/*其餘程式碼省略*/}     

    </div>
)

io.on('connection', socket => {

    /*其餘程式碼省略*/
    
    socket.on('addRoom', room => {
        socket.join(room)
        //(1)發送給在同一個 room 中除了自己外的 Client
        socket.to(room).emit('addRoom', '已有新人加入聊天室！')
        //(2)發送給在 room 中所有的 Client
        io.sockets.in(room).emit('addRoom', '已加入聊天室！')
    })
})

//取得 rooms 物件，包含了預設 id 及另外 join 的資料
const rooms = socket.rooms

//將值取出來，尋找預設 id 外的值就能取到 join 的 id
let room = Object.keys(rooms).find(room =>{
    return room !== socket.id
})

socket.join(room,()=>{
  //do something...
})

socket.on('addRoom', room => {
    //加入前檢查是否已有所在房間
    const nowRoom = Object.keys(socket.rooms).find(room =>{
        return room !== socket.id
    })
    //有的話要先離開
    if(nowRoom){
        socket.leave(nowFoom)
    }
    //再加入新的
    socket.join(room)
    io.sockets.in(room).emit('addRoom', '已有新人加入聊天室！')
})

io.on('connection', socket => {
    
    /*其餘程式碼省略*/

    //送出中斷申請時先觸發此事件
    socket.on('disConnection', message => {
        const room = Object.keys(socket.rooms).find(room => {
            return room !== socket.id
        })
        //先通知同一 room 的其他 Client
        socket.to(room).emit('leaveRoom', `${message} 已離開聊天！`)
        //再送訊息讓 Client 做 .close()
        socket.emit('disConnection', '')
    })

    //中斷後觸發此監聽
    socket.on('disconnect', () => {
        console.log('disconnection')
    })
})

const disConnectWebSocket = () =>{
    //向 Server 送出申請中斷的訊息，讓它通知其他 Client
    ws.emit('disConnection', 'XXX')
}

const initWebSocket = () => {

    /*其餘程式碼省略*/
  
    //以 leaveRoom 接收有使用者離開聊天的訊息
    ws.on('leaveRoom', message => {
        console.log(message)
    })
    // Server 通知完後再傳送 disConnection 通知關閉連線
    ws.on('disConnection', () => {
        ws.close()
    })
}

return (
    <div>
        {/*其餘省略*/}
        <input type='button' value='斷線' onClick={disConnectWebSocket} />
        {/*其餘省略*/}
    </div>
)