Integrating WebSocket to enhance the EdTech project with real-time data
Introduction
WebSocket is a crucial technology that enables real-time communication, especially in applications in the EdTech sector. Thanks to websocket technology, you can update your email list without refreshing the page whenever you receive an email, or see that the other person is typing a message with the endpoint while the other person is typing a message in the WhatsApp application. So, we will give technical information about websocket integration in the 7LMS project that we developed with the multilingual all-in-one digital school concept.
Table of Contents
Understanding WebSocket technology
WebScoket is a library or tool that allows full duplex communication channels over a single TCP (Transmission Control Protocol). This means that both client and server can send messages to each other at any time – like a real-time application like chat applications – live notifications, etc. So if we continue with an online game example, thanks to web socket, you can receive notifications repeatedly while playing the game.
Now we will explain step by step the websocket configuration on the Node js typescript framework.
Benefits of WebSockets in 7LMS
We have integrated WebSocket functionality in our 7LMS project to facilitate real-time communication. Here are the 3 most basic functions:
Discussion board:
WebSocket powers the discussion board feature, enabling users to exchange messages in real time. This allows participants to communicate instantly, fostering collaboration and engagement during discussions.
Check online users:
Another application of WebSocket in 7lms is in displaying online users. This feature provides users with immediate feedback on who is currently active, enhancing the sense of community within the platform.
Notifications and help center:
Significantly in Help Center feature, if there is a need of sending a notification in any type of feature, we utilize websocket to send notifications to users.
Step-by-step guide to WebSocket with TypeScript in Node.js
Using TypeScript with WebSocket in Node.js enhances the development experience by providing type safety and better tooling support. Here’s a brief overview of how to set up a WebSocket server and client using TypeScript:
Installation:
First off, obviously you need to install the ws library and its TypeScript definitions:
This is the first and the simplest step that you need to do. Secondly;
Creating a WebSocket server:
You can create a WebSocket server that listens for connections and handles messages. We need to listen to every server that might send data to us. For example:
The code above demonstrates how to establish a WebSocket in a Node.js TypeScript framework. This initializes the process by which websocket starts listening to clients. As you see in the consoles we are following the event in which one can connect to our server. What if we try to observe vice versa, which means, in the above case server connected to the client and in this example, i am about to give a client will connect to the server:
As you can see in the console, clients greet the server 😊.
Core WebSocket functions
Emit User Events:
The emitUser function allows us to send messages to specific users based on their IDs. This function is very fruitful for us to overcome real-time message issues. We call this function in many places. It checks if the provided IDs are valid and retrieves the corresponding socket IDs from the cache. If valid socket IDs are found, it emits the specified event to those sockets:
For those who use the same framework, this code snippet above will help you picture how we do it and implement it.
General Emit function:
The emit function is used to send messages to either a specific user or all connected clients. By this function, with a slight difference from function above, we are able to send messages to those who don’t have ids or to all the users. It constructs a message object that includes details about the user sending the message and the type of data being sent:
Guest user creation:
The guestUser function creates a user object for guests connecting to the WebSocket. This function focuses on just one object. It generates a unique ID and can include additional information based on whether the info parameter is true:
Finding active users:
As you all know, in chat applications or the likes of those, we see who is online or not and they are generally displayed with green and grey color. The activeUsers function effectively combines cache scanning and database querying to provide a list of active users. It ensures that unique user IDs are processed and retrieves comprehensive user data, making it a crucial part of our real-time user management system. To achieve this, we get benefits from this function:
Conclusion
WebSocket is a powerful tool to enable real-time communication, especially in applications in the EdTech sector. Using TypeScript with Node.js, we can build robust WebSocket servers and clients that enhance the user experience. In our framework, we leverage WebSocket to send messages to specific users and effectively manage guest connections. In the 7LSM platform with the all-in-one digital school concept, we enrich the learning experience with websocket technology.
Source:
- https://medium.com/@vitaliykorzenkoua/working-with-websocket-in-node-js-using-typescript-1aebb8a06bd6
- https://www.basedash.com/blog/working-with-websockets-in-node-js-using-typescript
- https://stackoverflow.com/questions/48554582/writing-websocket-client-with-typescript-running-both-on-browser-and-node-js
Mysoly | Your partner in digital!
bilal cangal serkan kilic
