arne/arnweb-chat
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added chat with usernames

Browse Source
This commit is contained in:
Arne van Iterson 2019-08-21 20:32:42 +02:00
parent 20311ce5e2
commit 1b77a5511c
3 changed files with 102 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
index.html Normal file
View File

@ -0,0 +1,54 @@
<!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>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
// Create socket
var socket = io();
// Wait for server response and identify client
socket.on('user_identify', function(){
socket.emit('user_login', 'Bart');
});
// Send data to server on form submit
$('form').submit(function(e){
e.preventDefault();
var msg = {
'username': $('#username').val(),
'message': $('#message').val()
}
socket.emit('message_send', msg);
$('#message').val('');
return false;
});
// Receive messages from server
socket.on('message_receive', function(msg){
$('#messages').append($('<li>').text(msg.username + ': ' + msg.message));
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="username" autocomplete="off" />
<input id="message" autocomplete="off" />
<button>Send</button>
</form>
</body>
</html>

42
index.js Normal file
View File

@ -0,0 +1,42 @@
// Include dependencies
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http)
// Set variables
const port = 9966;
var users = 0;
// Serve Client
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
// Socket.io server side
io.on('connection', function (socket) {
// Log connects / disconnects
console.log('User connected');
socket.emit('user_identify');
socket.on('user_login', function (username) {
io.emit('message_receive', { 'username': 'Server', 'message': `${username} has connected`});
});
users++;
socket.on('disconnect', function () {
console.log('User disconnected');
users--;
});
console.log(`Users online: ${users}`);
// Handle messages
socket.on('message_send', function (msg) {
console.log(msg.username + ': ' + msg.message);
io.emit('message_receive', msg);
});
});
// Log on server
http.listen(port, function() {
console.log(`Listening on port ${port}`);
});

12
node_modules/socket.io/package.json generated vendored
View File

@ -1,19 +1,19 @@
{
"_from": "socket.io",
"_from": "socket.io@^2.2.0",
"_id": "socket.io@2.2.0",
"_inBundle": false,
"_integrity": "sha512-wxXrIuZ8AILcn+f1B4ez4hJTPG24iNgxBBDaJfT6MsyOhVYiTXWexGoPkd87ktJG8kQEcL/NBvRi64+9k4Kc0w==",
"_location": "/socket.io",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"type": "range",
"registry": true,
"raw": "socket.io",
"raw": "socket.io@^2.2.0",
"name": "socket.io",
"escapedName": "socket.io",
"rawSpec": "",
"rawSpec": "^2.2.0",
"saveSpec": null,
"fetchSpec": "latest"
"fetchSpec": "^2.2.0"
},
"_requiredBy": [
"#USER",
@ -21,7 +21,7 @@
],
"_resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.2.0.tgz",
"_shasum": "f0f633161ef6712c972b307598ecd08c9b1b4d5b",
"_spec": "socket.io",
"_spec": "socket.io@^2.2.0",
"_where": "C:\\Users\\Arnev\\Documents\\Git\\arnweb-chat",
"bugs": {
"url": "https://github.com/socketio/socket.io/issues"