``` js // initialize express and socket.io servers const express = require('express') const {Server} = require('socket.io') const { createServer } = require('http') const app = express() const httpServer = createServer(app) const io = new Server(h
npm install socket-room-system js
// initialize express and socket.io servers
const express = require('express')
const {Server} = require('socket.io')
const { createServer } = require('http')
const app = express()
const httpServer = createServer(app)
const io = new Server(httpServer)
// import socket-room-system module
const startRoomSystem = require('socket-room-system')
// import custom app constructor from game.js file (sample below)
const gameConstructor = require('./game.js')
// begin room system with arguments: custom app-contructor, io-server, express-app
startRoomSystem(gameConstructor, io, app)
//more express set-up
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.get('/', (req, res) => {
res.render('index.ejs')
})
httpServer.listen(5000 || process.env.PORT, () => {
console.log('Server has started.')
})
`
game.js:
` js
// app has to implement recieveData and onConnect function
// app has a function broadcast, which is added in room system layer
// be sure not to overrride it
module.exports = () => {
return {
leader: undefined,
running: false,
counter:0,
interval:undefined,
// gets called when new client joins room
// client id is a uuid4 string
onConnect: function(clientId){
// if noone is connected make new client a leader
if(this.leader) return
this.leader = clientId
},
// gets called when room recieves data
// clientId is sender uuid
// in this example I differentiate between requests using data.type, but you can use any keyword (emit, message, command)
recieveData: function(clientId, data){
// on data.type 'startAutoAdd', if client issuing this command is a leader, and interval is not yet running
// start interval, that adds one to counter and broadcasts new value
if(data.type === 'startAutoAdd' && clientId === this.leader && !this.running){
this.running = true
this.interval = setInterval(() => {
this.counter += 1
// broadcasting message to everyone in room
this.broadcast({type: "counterChange", counter: this.counter})
}, 1000)
}
// leader can stop interval
if(data.type === 'stopAutoAdd' && clientId === this.leader && this.running){
this.running = false
clearInterval(this.interval)
}
// add one to counter and broadcast
if(data.type === "add"){
this.counter += 1
this.broadcast({type: "counterChange", counter: this.counter})
}
}
}
}
`
index.js:
` js
import { client } from "/socketRoomSystem-Client/client.js"
$("#CreateRoom").on('click', () => {
// client creates room, and joins it automatically
client.createRoom()
})
client.on("room_created",(roomId) => {
// createRoom callback -> roomId is uuid string of a new room
console.log("Created room with id: " + roomId)
})
$("#JoinRoom").on('click', () => {
// client joins a room -> argument is a uuid of existing room
client.joinRoom($("#JoinRoomId").val())
})
client.on("room_joined", (roomId) => {
// joinRoom callback
console.log("Joined room with id: " + roomId)
})
$("#GetRoomOptions").on('click', () => {
console.log("room opt")
// request room options
client.getRoomOptions()
})
client.on("room_options", (data)=>{
// getRoomOptions callback
// data -> roomObject
console.log(data)
})
client.on("room_state_changed", (data) => {
// is triggered when room changes it's configuration
// data contain option, that was changed and new val -> {option: "members", newVal: ["socketA","socketB","socketC"]}
// triggered for example when someone joins a room
console.log(data)
})
client.on('room_doesnt_exist', (room) => {
console.log(room with id ${room} doesn't exist)
})
$("#AutoAdd").on('click', () => {
// sendAppData passes data to your app on a server
client.sendAppData({type: 'startAutoAdd'})
})
$("#StopAutoAdd").on('click', () => {
client.sendAppData({type: 'stopAutoAdd'})
})
$("#Add").on('click', () => {
client.sendAppData({type: 'add'})
})
// gets called on a broadcast from your app
client.on("app_data", (data) => {
if(data.type === 'counterChange'){
$("#Counter").text(JSON.stringify(data.counter))
}
})
`
index.ejs:
`html
Document
Index
0
``