A chat app built with socket.io, a JavaScript library/engine for adding real-time, bidirectional, event-based communication to applications.
Socket.io controls a server running on the backend which listens for 'chat' and 'typing' websocket events on port 8000. (These are custom websocket events and can be defined as needed by the developer.)
On the front end (that is, on the client), Javascript listens for two standard Javascript events:
- a user typing into the
input#message - a user hitting the
#btnSend button
The front end also has some Socket.io code running listening for websocket events:
- a 'chat' event from the server
- a 'typing' event from the server
When a user types, the client emits a 'typing' websocket event to the server on the backend. This 'typing' event contains the handle of the user typing.
When the server receives this 'typing' event, it turns around and broadcasts the details of the 'typing' event back to anyone connected to the server from a front-end client. The client, which is listening for the 'typing' websocket event, can then do something with the details in the 'typing' event. Here, it console.logs that the currently-typing user is typing.
When a user submits a new message, the client sends a 'chat' websocket event to the server. This 'chat' message contains the handle of the user who sent it, as well as the contents of the message itself.
By now this should sound familiar. The server is listening for a 'chat' websocket event. When it receives one, it turns around and broadcasts the 'chat' event back to all connected clients, including the handle and message.
The client, which, remember, is listening for a 'chat' websocket event from the server, then receieves this 'chat' websocket event and appends it to the .messages element. This way everyone can see what everyone has written.
- Clone the repository.
- Navigate to the project directory from the command line.
- Run
npm installto install the dependencies - Now run
npm start - Navigate to
localhost:8000within your favourite browser.
The GPL V 3.0 License