Server side
Features
- Express.js Application Setup with CORS enabled, HTTP server object to serve the Express.js application
- Event Handling for Disconnections
- Room Selection Handling
- Connection Event Listening
- Connection Error Handling
Explanations
apps\backend\src\index.ts
Create an Express.js application with CORS enabled, running on a specified port and served by an HTTP server:
const app = express();
const port = env.port;
app.use(cors());
// create a HTTP server object
const server = http.createServer(app);
Initialize a new instance of socket.io:
const io = new Server(server, {
cors: {
origin: env.clientUrl,
// credentials: true
}
});
Define the socket object type:
type SocketType = Socket<DefaultEventsMap, DefaultEventsMap, DefaultEventsMap, Record<string, never>>;
Declare custom rooms (an arbitrary channel that sockets can join and leave):
const customRooms = ["Room A", "Room B", "Room C"];
Event handler for managing disconnections. Use io.of("/").sockets.size to get The number of currently connected clients, and emit the receive_online_people_count event to all connected clients, including the current one:
const handleDisconnect = (socket: SocketType) => () => {
console.log('A user disconnected:', socket.id, 'io.of("/").sockets.size:', io.of("/").sockets.size);
try {
io.emit("receive_online_people_count", io.of("/").sockets.size);
} catch (error) {
console.error(error)
}
}
A generic function to handle socket emit events: check if a client has joined an additional room beyond the default room (public channel) using socket.rooms.size > 1; if so, emit the event to that specific room, otherwise, emit the event to all connected clients, including the current one:
const handleEmit = <T extends Record<string, unknown> | string | number | boolean>(socket: SocketType, eventName: string) => (value: T) => {
try {
// NOTE: `socket.rooms.size > 1` because a socket is always in the public channel
if (socket.rooms.size > 1) socket.rooms.forEach(room => socket.to(room).emit(eventName, value)); // TODO: `socket.to(room).emit` this is not able to send to the sender itself
else io.emit(eventName, value);
} catch (error) {
console.error(error)
}
}
Handle the client’s "choose room" event by defining a leaveRooms function that allows the current socket to leave all custom rooms (while remaining in the default public channel), and emit the receive_room_selected_value event with the rooms the current socket joins to the socket itself:
const handleSelectRoom = (socket: SocketType) => (roomId: string) => {
console.log('user enter the room:', socket.id, `roomId: ${roomId}`);
const leaveRooms = () => {
socket.rooms.forEach(room => { if (customRooms.includes(room)) { socket.leave(room) } });
}
try {
leaveRooms(); // NOTE: allow this socket to join only one room at a time
if (roomId !== "public channel") socket.join(roomId);
socket.emit("receive_room_selected_value", roomId, `socket: ${socket.id} is in the rooms: ${Array.from(socket.rooms).join(',')}`);
} catch (error) {
console.error(error)
}
}
Listen for the connection event to handle incoming sockets, then use io.emit("receive_online_people_count", io.of("/").sockets.size); to broadcast the current number of connected clients:
io.on('connection', (socket: SocketType) => {
console.log('a user connected', socket.id);
io.emit("receive_online_people_count", io.of("/").sockets.size);
socket.on("send_msg", handleEmit(socket, 'receive_msg'));
socket.on("dropdown_selected_value", handleEmit(socket, 'receive_dropdown_selected_value'));
socket.on("checkbox_is_checked", handleEmit(socket, 'receive_checkbox_is_checked'));
socket.on("radio_selected_value", handleEmit(socket, 'receive_radio_selected_value'));
socket.on("textarea_value", handleEmit(socket, 'receive_textarea_value'));
socket.on("map_position", handleEmit(socket, 'receive_map_position'));
socket.on("room_selected_value", handleSelectRoom(socket));
socket.on("disconnect", handleDisconnect(socket));
});
Listen to connection errors and handle them:
io.engine.on("connection_error", (err) => {
console.log(err.req); // the request object
console.log(err.code); // the error code, for example 1
console.log(err.message); // the error message, for example "Session ID unknown"
console.log(err.context); // some additional error context
});
Expose the port:
server.listen(port, () => {
console.log(`Listening on port ${port}...`);
});
🎉 Check out the code on GitHub
Top comments (0)