多人連線

我們今天使用 socket.io 來創建一個多人的遊戲方式，client 端與 server 端保持連線，server 將數據傳送到每個 client 端，讓 client 端顯示資訊。簡單來說就是 client 與 server 即時雙向通信。

Javascript 內容

// server.js
// 引用 express 模組
let express = require('express')
let app = express()
let server = require('http').Server(app)
app.use(express.static(__dirname + '/public'))
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html') 
})

// 偵聽 8080 port
server.listen(8080, function(){})

// 加入 socket.io
// 偵聽連接與結束連接
io.on('connection', function(socket) {
    console.log('connected')
    socket.on('disconnect', function(){
        console.log('disconnected')
    })
})

// 加入追蹤所有玩家

io.on('connection', function(){
    players[socket.id] = {
        x: Math.floor(Math.random() * 600) + 40,
        y: Math.floor(Math.random() * 600) + 40,
        playerId: socket.id
    }

    socket.emit('currentPlayers', players)
    socket.broadcast.emit('newPlayer', players[socket.id])

    // 玩家結束與 server 連接時，刪除該玩家的數據
    socket.on('disconnect', function(){
        console.log('disconnected')
        delete players[socket.id]
        io.emit('disconnect', socket.id)
    })
})

結論

今天試著使用 socket.io，建立如何多人連線的使用方式。
參考資料如下，有更深入的介紹。
https://gamedevacademy.org/create-a-basic-multiplayer-game-in-phaser-3-with-socket-io-part-1/
https://gamedevacademy.org/create-a-basic-multiplayer-game-in-phaser-3-with-socket-io-part-2/

今天就先到這裡，我們明天見。