Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/omkaarr1/websocket

In this presentation, we will explore the process of building a WebSocket-based chat application that facilitates real-time communication between two clients. We'll delve into the server-side and client-side code to understand how messages are exchanged between the connected clients.
https://github.com/omkaarr1/websocket

chat real-time realtime websocket websockets

Last synced: about 2 months ago
JSON representation

In this presentation, we will explore the process of building a WebSocket-based chat application that facilitates real-time communication between two clients. We'll delve into the server-side and client-side code to understand how messages are exchanged between the connected clients.

Awesome Lists containing this project

README 

        
**Creating a WebSocket-Based Chat Application**



In this presentation, we will explore the process of building a WebSocket-based chat application that facilitates real-time communication between two clients. We'll delve into the server-side and client-side code to understand how messages are exchanged between the connected clients. The application uses Node.js for the server and vanilla JavaScript for the client.



**Server-Side Implementation:**



1. We use the Node.js platform to set up a WebSocket server using the 'ws' module.

2. The WebSocket server listens on port 8080 to handle incoming client connections.

3. Upon a new client connection, a unique client ID is generated for the client, and the WebSocket connection is stored in an array named 'clients'.

4. We strictly limit the server to only two clients at a time by closing new connections if there are already two clients connected.

5. When two clients are connected, an initial pairing message is sent to each client, indicating the other client's ID.

6. When a message is received from one client, the server identifies the sender using 'clients.indexOf(ws)' and then determines the receiver based on the index. The message is then forwarded to the receiver.



**Client-Side Implementation:**



1. The chat application is built using HTML, CSS, and JavaScript, providing a simple user interface.

2. Clients use WebSocket to establish a connection to the server.

3. When a client sends a message through the input field, the message is displayed in the chat box area with a "You" prefix.

4. The client-side WebSocket receives messages from the server, and any message received is displayed in the chat box area without a prefix.



**Steps to Operate the Chat Application:**



1. Install the required Node.js modules by running 'npm install ws' in the project directory.

2. Set up the WebSocket server using the provided 'server.js' code.

3. Create an HTML file with the client-side code ('index.html') and include the appropriate CSS styles.

4. Open both the index and server html webpages

5. The chat box will display messages sent by each client along with the corresponding client IDs.

6. Type a message in the input field and click "Send" to see it displayed in the chat box and forwarded to the other client.

7. Two clients can communicate back and forth in real-time, and the application will maintain a one-to-one messaging system.



**Conclusion:**



WebSocket technology enables the creation of real-time communication applications, making it possible for clients to exchange messages efficiently and instantly. By implementing a simple WebSocket-based chat application with Node.js on the server-side and vanilla JavaScript on the client-side, we can provide a seamless chatting experience between two clients. This presentation demonstrates the power and simplicity of WebSocket communication and highlights the potential for building more complex applications that require real-time data exchange.