├── .gitignore
├── README.md
├── app.js
├── config.json
├── img
    └── example.gif
├── package.json
├── style
    └── js
    │   └── index.js
└── views
    └── index.ejs


/.gitignore:
--------------------------------------------------------------------------------
1 | # Node
2 | node_modules/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Socket.io Express
 2 | 
 3 | A simple express project to learn how to use socket.io ✨
 4 | 
 5 | ### 👶 Simple project
 6 | 
 7 | This is a small project that has been designed to be usable by everyone.
 8 | 
 9 | The objective of this project is to edit the data of a web page.
10 | 
11 | In this example, I chose to refresh this data every second :
12 | 
13 | - The last uptime
14 | - A random number
15 | 
16 | The strong features of the method used :
17 | 
18 | - Updates without reloading the page
19 | - Even after a restart or an interruption the data will be updated on restart
20 | 
21 | ![Example](./img/example.gif)
22 | 
23 | Realized with ❤️ by [ZerioDev](https://github.com/ZerioDev).


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | const { Server } = require('socket.io');
 2 | 
 3 | const http = require('http');
 4 | const express = require('express');
 5 | 
 6 | const config = require('./config.json');
 7 | 
 8 | this.app = express();
 9 | this.app.use(express.json());
10 | this.app.set('view engine', 'ejs');
11 | this.app.use(express.static('style'));
12 | this.app.use(express.urlencoded({ extended: false }));
13 | 
14 | this.server = http.createServer(this.app);
15 | this.io = new Server(this.server);
16 | 
17 | this.app.get('/', (req, res) => res.render('index.ejs'));
18 | 
19 | setInterval(() => {
20 |     this.io.emit('uptime', {
21 |         number: Math.round(Math.random() * (100 - 1) + 1)
22 |     });
23 | }, 1000);
24 | 
25 | this.server.listen(config.port ?? 8080, () => console.log(`Express server ready on the port ${config.port ?? 8080}`));


--------------------------------------------------------------------------------
/config.json:
--------------------------------------------------------------------------------
1 | {
2 |     "port": 8080
3 | }


--------------------------------------------------------------------------------
/img/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZerioDev/Socket.io-Express/b2f98d3dc1c844ab51a323924eb13c01d3301f67/img/example.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "socket.io-express",
 3 |   "main": "app.js",
 4 |   "author": "ZerioDev",
 5 |   "version": "1.0.0",
 6 |   "repository": "https://github.com/ZerioDev/Socket.io-Express.git",
 7 |   "description": "A simple express project to learn how to use socket.io",
 8 |   "scripts": {
 9 |     "start": "node app.js"
10 |   },
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "ejs": "^3.1.6",
14 |     "express": "^4.17.2",
15 |     "socket.io": "^4.4.0"
16 |   }
17 | }


--------------------------------------------------------------------------------
/style/js/index.js:
--------------------------------------------------------------------------------
1 | const socket = io();
2 | 
3 | socket.on('uptime', function (res) {
4 |     const lastUptime = document.getElementById('uptime');
5 |     const randomNumber = document.getElementById('number');
6 | 
7 |     lastUptime.textContent = `Last update ${new Date(Date.now()).toTimeString()}`;
8 |     randomNumber.textContent = `Random number ${res.number}`;
9 | });


--------------------------------------------------------------------------------
/views/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>Express server</title>
 7 | </head>
 8 | 
 9 | <body>
10 |     <p id="uptime">
11 |         Last uptime <%= new Date(Date.now()).toTimeString() %>
12 |     </p>
13 |     <p id="number">
14 |         Random number <%= Math.round(Math.random() * (100 - 1) + 1) %>
15 |     </p>
16 | </body>
17 | 
18 | </html>
19 | 
20 | <!-- Socket -->
21 | <script src="/socket.io/socket.io.js"></script>
22 | 
23 | <!-- Javascript -->
24 | <script src="js/index.js"></script>


--------------------------------------------------------------------------------