├── .gitignore
├── package.json
├── public
├── index.html
└── script.js
└── server.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "websockets",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "dependencies": {
13 | "express": "^4.16.4",
14 | "socket.io": "^2.2.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 | Chat App
14 |
15 |
16 |
17 |
18 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/public/script.js:
--------------------------------------------------------------------------------
1 | const socket = io()
2 |
3 | // because of const socket = io(), connection event triggers in server.js
4 |
5 | // this socket is client side. and the one in server.js are different.
6 | // we get this function from /socket.io/socket.io.js
7 |
8 | // setTimeout(() => {
9 | // console.log('Connected ' + socket.id)
10 | // }, 2000);
11 |
12 | // shows when it connects
13 | socket.on('connect', () => {
14 | console.log('Connected ' + socket.id)
15 | })
16 |
17 | socket.on('chat_rcvd', (data) => {
18 | $('#chats').append(
19 | $('').text(
20 | `${data.username}: ${data.msg}`
21 | )
22 | )
23 | })
24 |
25 | $(() => {
26 | $('#chatbox').hide()
27 |
28 | $('#login').click(() => {
29 | socket.emit('login', {
30 | username: $('#username').val()
31 | })
32 | })
33 |
34 | socket.on('loggedin', () => {
35 | console.log('Login successful')
36 | $('#loginform').hide()
37 | $('#chatbox').show()
38 | })
39 |
40 | $('#send').click(() => {
41 | console.log('Sending chat')
42 | socket.emit('chat', {msg: $('#msg').val()})
43 | })
44 | })
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const http = require('http');
3 | const socketio = require('socket.io');
4 |
5 | const app = express();
6 | const server = http.createServer(app);
7 | // const server = http.Server(app);
8 | // NOTE : server here is an EventEmitter object
9 | const io = socketio(server);
10 | // io is an interface via which sockets can connect
11 |
12 | let idUserMap = {}
13 |
14 | io.on('connection', (socket) => {
15 | console.log('Connected ' + socket.id)
16 |
17 | socket.on('login', (data) => {
18 | idUserMap[socket.id] = data.username
19 | socket.emit('loggedin')
20 | })
21 |
22 | socket.on('chat', (data) => {
23 | io.emit('chat_rcvd', {
24 | username: idUserMap[socket.id],
25 | msg: data.msg
26 | }) // will send to all sockets in io
27 |
28 | // socket.broadcast.emit('chat_rcvd', {
29 | // username: idUserMap[socket.id],
30 | // msg: data.msg
31 | // })
32 |
33 | // io.emit('chat_rcvd', {
34 | // username: idUserMap[socket.id],
35 | // msg: data.msg
36 | // })
37 | })
38 |
39 | })
40 |
41 | app.use('/', express.static(
42 | __dirname + '/public'
43 | ))
44 |
45 | server.listen(3333, () => {
46 | console.log('Server has started on http://localhost:3333')
47 | })
--------------------------------------------------------------------------------