Created
March 9, 2020 03:03
-
-
Save mentix02/a5ded64a6cd016388cfd3c2de404b6b7 to your computer and use it in GitHub Desktop.
A simple chat app.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Socket.IO chat</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { font: 13px Helvetica, Arial; } | |
| form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } | |
| form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } | |
| form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } | |
| #messages { list-style-type: none; margin: 0; padding: 0; } | |
| #messages li { padding: 5px 10px; } | |
| #messages li:nth-child(odd) { background: #eee; } | |
| </style> | |
| </head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <body> | |
| <ul id="messages"></ul> | |
| <form action=""> | |
| <input id="u" style="width: 20%" placeholder="username" autocomplete="off"> | |
| <input id="m" style="width: 50%" placeholder="message" autocomplete="off" autofocus><button>Send</button> | |
| </form> | |
| <script src="/socket.io/socket.io.js"></script> | |
| <script src="https://code.jquery.com/jquery-1.11.1.js"></script> | |
| <script> | |
| $(function() { | |
| let u = $('#u'); | |
| if (!localStorage.getItem('username')) { | |
| let username = prompt('Enter a username.'); | |
| localStorage.setItem('username', username); | |
| u.val(username); | |
| } else { | |
| u.val(localStorage.getItem('username')); | |
| } | |
| let m = $('#m'); | |
| let messages = $('#messages'); | |
| let socket = io(); | |
| $('form').submit(function(e) { | |
| e.preventDefault(); | |
| socket.emit('chat message', {msg: m.val(), username: u.val()}); | |
| m.val(''); | |
| return false; | |
| }); | |
| socket.on('chat message', function(data) { | |
| messages.append($('<li>').text(`${data.username} : ${data.msg}`)); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let app = require('express')(); | |
| let http = require('http').createServer(app); | |
| let io = require('socket.io')(http); | |
| app.get('/', function(req, res) { | |
| res.sendFile(__dirname + '/index.html'); | |
| }); | |
| io.on('connection', function(socket) { | |
| console.log('a user connected'); | |
| socket.on('chat message', function(data) { | |
| io.emit('chat message', data); | |
| }); | |
| }); | |
| http.listen(3000, function() { | |
| console.log('Listening on http://localhost:3000'); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment