https://github.com/jamesgeorge007/lets-chat

A chat app built with socket.io real time engine.
https://github.com/jamesgeorge007/lets-chat

chat-application css3 hacktoberfest hacktoberfest18 hacktoberfest2018 html5 javascript socket-io web-sockets

Last synced: 6 months ago
JSON representation

A chat app built with socket.io real time engine.

• Host: GitHub
• URL: https://github.com/jamesgeorge007/lets-chat
• Owner: jamesgeorge007
• License: gpl-3.0
• Created: 2018-07-06T02:28:17.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-03T05:13:41.000Z (about 5 years ago)
• Last Synced: 2025-04-22T20:13:54.048Z (6 months ago)
• Topics: chat-application, css3, hacktoberfest, hacktoberfest18, hacktoberfest2018, html5, javascript, socket-io, web-sockets
• Language: JavaScript
• Size: 166 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Chat-App

> A chat app built with socket.io, a JavaScript library/engine for adding real-time, bidirectional, event-based communication to applications.

### Demo

![Demo](https://github.com/jamesgeorge007/Lets-Chat/blob/master/assets/Demo.gif)

### Snip

![Snip](https://github.com/jamesgeorge007/Lets-Chat/blob/master/assets/snip.JPG)

## How it works

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 `#btn` Send 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

### User is typing...

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.log`s that the currently-typing user is typing.

### New message

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.

## Instructions

- Clone the repository.

- Navigate to the project directory from the command line.

- Run ```npm install``` to install the dependencies

- Now run ```npm start```

- Navigate to ```localhost:8000``` within your favourite browser.

## License

> The GPL V 3.0 License