Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theemperorofdaiviet/socket.io-chat-example
A basic chat application to get started with Socket.IO
https://github.com/theemperorofdaiviet/socket.io-chat-example
chat-app css3 expressjs html5 javascript nodejs realtime socket-io websocket
Last synced: 4 days ago
JSON representation
A basic chat application to get started with Socket.IO
- Host: GitHub
- URL: https://github.com/theemperorofdaiviet/socket.io-chat-example
- Owner: theEmperorofDaiViet
- Created: 2023-08-01T17:19:08.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-09-12T09:58:02.000Z (over 1 year ago)
- Last Synced: 2024-12-15T16:17:56.948Z (about 2 months ago)
- Topics: chat-app, css3, expressjs, html5, javascript, nodejs, realtime, socket-io, websocket
- Language: HTML
- Homepage:
- Size: 4.86 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
# About The Project
A basic chat application to get started with Socket.IO
## Built With
* [![HTML5][HTML5-shield]][HTML5-url]
* [![CSS3][CSS3-shield]][CSS3-url]
* [![JavaScript][JavaScript-shield]][JavaScript-url]
* [![Node.js][Node.js-shield]][Node.js-url]
* [![Express][Express-shield]][Express-url]
* [![Socket.IO][Socket.IO-shield]][Socket.IO-url]
# Getting Started
## Prerequisites
Before cloning and using this application, you'll need to install these things on your computer:
* [Node.js](https://nodejs.org/en/download/): a single-threaded, open-source, cross-platform runtime environment for building fast and scalable server-side and networking applications. It runs on Chrome's V8 JavaScript runtime engine, and it uses event-driven, non-blocking I/O architecture, which makes it efficient and suitable for real-time applications.
* [Express](https://expressjs.com/): fast, unopinionated, minimalist web framework for Node.js.
```sh
npm install express
```
* [Socket.IO](https://socket.io/): a library that enables low-latency, bidirectional and event-based communication between a client and a server. It is built on top of the WebSocket protocol and provides additional guarantees like fallback to HTTP long-polling or automatic reconnection.
```sh
npm install socket.io
```
* [Visual Studio Code](https://code.visualstudio.com/download): You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
## Installation
You can install this application by cloning this repository into your current working directory:
```sh
git clone https://github.com/theEmperorofDaiViet/socket.io-chat-example
```
After cloning the repository, you can open the project by Visual Studio Code.
Open a terminal and type this command:
```sh
cd src
node index.js
```
Then open two or more browser windows for http://localhost:3000/, enter some messages in each of them and see the result!
# Key Features
- Realtime chat.
- Support for nicknames.
- Broadcast a message to connected users when someone connects or disconnects.
- Don’t send the same message to the user that sent it. Instead, append the message directly as soon as they press enter.
- “{user} is typing” functionality.
# Usage
I use a conversation from Chapter 10 of the manga "Bocchi the Rock!" to illustrate how this chat application works:
# Contact
You can contact me via:
* [![GitHub][GitHub-shield]][GitHub-url]
* [![LinkedIn][LinkedIn-shield]][LinkedIn-url]
* ![Gmail][Gmail-shield]: [email protected]
* [![Facebook][Facebook-shield]][Facebook-url]
* [![Twitter][Twitter-shield]][Twitter-url]
[HTML5-shield]: https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white
[HTML5-url]: https://www.w3.org/html/
[CSS3-shield]: https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white
[CSS3-url]: https://www.w3.org/Style/CSS/
[JavaScript-shield]: https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E
[JavaScript-url]: https://www.ecma-international.org/
[Node.js-shield]: https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white
[Node.js-url]: https://nodejs.org
[Express-shield]: https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB
[Express-url]: https://expressjs.com/
[Socket.IO-shield]: https://img.shields.io/badge/Socket.io-010101?&style=for-the-badge&logo=Socket.io&logoColor=white
[Socket.IO-url]: https://socket.io/
[GitHub-shield]: https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white
[GitHub-url]: https://github.com/theEmperorofDaiViet
[LinkedIn-shield]: https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white
[LinkedIn-url]: https://www.linkedin.com/in/khiet-to/
[Gmail-shield]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white
[Facebook-shield]: https://img.shields.io/badge/Facebook-%231877F2.svg?style=for-the-badge&logo=Facebook&logoColor=white
[Facebook-url]: https://www.facebook.com/Khiet.To.Official/
[Twitter-shield]: https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=Twitter&logoColor=white
[Twitter-url]: https://twitter.com/KhietTo