1.2.0 • Published 3 years ago
socket-room-system v1.2.0
socketRoomSystem
example:
main.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:
// 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:
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<!--
Be sure to import "/socket.io/socket.io.js" and "/socketRoomSystem-Client/client.js",
otherwise import {client} won't work. Also don't forget to change type to type="module".
-->
<script type="module" src="/socket.io/socket.io.js" defer></script>
<script type="module" src="/socketRoomSystem-Client/client.js" defer></script>
<script type="module" src="/index.js" defer></script>
<title>Document</title>
</head>
<body>
<h1>Index</h1>
<button id="CreateRoom">Create room</button>
<br>
<button id="JoinRoom">Join room</button>
<input id="JoinRoomId"type="text">
<br>
<button id="GetRoomOptions">get room options</button>
<br>
<br>
<br>
<br>
<button id="AutoAdd">auto add</button>
<button id="StopAutoAdd">auto add</button>
<button id="Add">add</button>
<h1 id="Counter">0</h1>
</body>
</html>
1.2.0
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.9
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago