Client Events
Your client should listen to these events.
Connected
Automatically sent when a user connects using socket.connect()
.
socket.on('connected', data => {
// Do stuff to set up the game, like hiding host only buttons
if(sessionStorage.getItem('uid') == uid) {
if(!document.getElementsByClassName('hostOnly')) return
for(const el of document.getElementsByClassName('hostOnly')){
el.style.display = 'inline-block'
}
}
sessionStorage.setItem('uid', data.user.uid)
})
Parameters
data
Object
Object with game and user info. See structure below.
{
gameType: 'wyr/nhie/etc',
gameId: 'ID',
user: {
name:'Display Name',
picture: 'https://example.com/pfp.png',
uid:'UID',
host: true || false
},
host: 'HOST UID'
}
Player Join
socket.on('player_join', data => { })
Parameters
data
Object
Object with player information.
{
"name": "NAME",
"photoURL": "PHOTO URL",
"uid": "UID"
}
Player Leave
socket.on('player_leave', uid => { })
Parameters
uid
String
The UID of the disconnecting player.
Votes
Get the votes sent from get_votes
socket.on('votes', (data) => {
document.getElementById('votes').innerHTML = ''
if(data.length == 0) return document.getElementById('votes').innerHTML = `<p>No votes for this option</p>`
data.forEach((vote) => {
document.getElementById('votes').innerHTML += `<p>${vote.name}</p>`
})
})
Parameters
votes
Array
The votes, which are object containing the user's name & their answer.
New Question
Get the new data from next
socket.on('new_question', question => {
document.getElementById('q').innerHTML = question
})
Parameters
question
String or object
The modes with one question will return the card content as a string. The ones with more than one will return an object, where opt1
is the first option and opt2
is the second.
Error
Listen for errors.
socket.on('connect_error', error => {
console.error('Socket connection error:', error);
});
socket.on('disconnect', reason => {
console.log('Socket disconnected:', reason);
});
socket.on('error', error => {
// { error:"The error:", fatal:true|false }
// If fatal is true, exit the page
})
Receive a Chat Message
Receive a chat message on the client.
socket.on("message", data => {
// add the chat message to your chat
})
Parameters
data
Object
An object containing the message (content) and author. See the structure below.
{
content: "message",
author: "Player Name"
}
Players
Get an array of players from get_players
socket.on('players', data => {
// show your player list
})
Parameters
data
Array
See structure below.
{
id:"uid",
name:"User",
vote:0
}
Kicking a User
socket.on('removed', (id) => {
if(id == /* get saved uid from start_data */) // change the page
}
Additional Word Wreck Events
Since Word Wreck has more components to it, it has a few extra events.
Vote
This will emit when everyone has submitted an answer to vote on.
Do not confuse this with votes for the other modes. Word Wreck involves 2 components to a round, with the 2nd being voting. This is for this 2nd round, not to get votes.
socket.on('vote', voteOptions => {
voteOptions.forEach(element => {
document.getElementById('votes').innerHTML += `<button style="margin-right:10px;margin-bottom:10px;" onclick="vote('${element.user}')">${element.a}</button>`
});
})
Parameters
voteOptions
Array
The answers to vote for. See structure below.
[
{
a: "ANSWER",
user: "USER UID"
}
]
Winner
When everyone has voted, this event will emit with the winner.
socket.on('winner', winner => {
const winnerA = winner.a.split('//')
document.getElementById('winner').innerHTML = `The winner is ${winner.name}. They said "${winnerA}"`
document.getElementById('wdiv').style.display = 'block'
})
Parameters
winner
Object
The name of the winner and their answer. See structure below.
{
a: "ANSWER",
name: "WINNER NAME"
}
New Host
If a new host is assigned, reflect that in your app.
socket.on('new_host', (uid) => {
if(sessionStorage.getItem('uid') == uid) {
if(!document.getElementsByClassName('hostOnly')) return
for(const el of document.getElementsByClassName('hostOnly')){
el.style.display = 'inline-block'
}
}
})
Last updated
Was this helpful?