Possible Features and Available WebSocket Events

[RickyC0626]

Summary

Here's a tentative list of possible chat features, available WebSocket events and examples showing how a client would interact with the server. Features that are checked have been implemented.

Basic Features

• Broadcast to all other clients when users join or leave

// Client joins, emits initial connect event
client.emit('chat:connect')
// Server listens, then notifies all clients that this client has joined
serverSocket.on('chat:connect', () => serverIO.emit('chat:join', { id: socket.id }))
// Another client listens and confirms that the other client has joined
client2.on('chat:join', res => console.log(`User ID ${res.id} has joined`))

// Client disconnects, emits disconnect event
client.disconnect()
// Server listens, then notifies all clients that this client has left
serverSocket.on('disconnect', () => serverIO.emit('chat:leave', { id: socket.id }))
// Another client listens and confirms that the other client has left
client2.on('chat:leave', res => console.log(`User ID ${res.id} has left`))

• Nickname support

// Client submits form, emits set nickname event
client.emit('chat:set_nickname', nickName)
// Server listens, sets the nickname, then notify the same client that the nickname has been set
serverSocket.on('chat:set_nickname', name =>
{
    serverSocket.nickName = name
    socketIO.to(serverSocket.id).emit('chat:nickname_set', { nickName: name })
})
// Client listens and confirms nickname has been set
client.on('chat:nickname_set', res => console.log(`Nickname has been set to ${res.nickName}`))

• Sending messages to other clients in public chat

// Client types into chat, sends message, emits send global message event
client.emit('chat:send_global_message', msg)
// Server listens, then notifies all other clients about the message and who sent it
serverSocket.on('chat:send_global_message', msg =>
{
    serverSocket.broadcast.emit('chat:global_message_sent',
    {
        sender: { nickName: serverSocket.nickName, id: serverSocket.id }, message: msg
    })
})
// Another client listens and receives the message, along with sender's nickname and ID
client2.on('chat:global_message_sent', res =>
{
    console.log(`${res.sender.nickName || res.sender.id}: ${res.message}`)
})

• Chat presence {user} is typing..., {user1} and {user2} are typing..., {user1}, {user2} and {user3} are typing... or Multiple people are typing...

// While client is typing in chat, emit typing event
client.emit('chat:typing')
// Server listens, keeps track of which users are typing, then notifies all other clients
// Chat presence message varies depending on number of concurrent users
serverSocket.on('chat:typing', () =>
{
    serverSocket.broadcast.emit('chat:is_typing', { nickName: serverSocket.nickName, id: serverSocket.id })
})
// Another client listens and confirms other user is typing
client2.on('chat:is_typing', user => console.log(`${user.nickName} is typing...`)) 

• Number of users online
• Sending messages to specific client in private chat

Advanced Features

• Multiple individual rooms
• Main lobby / hub
• Pinging other users
• Reply to specific message