Menu
I am very new to socket.io or node.js, so I wanted to know how to print a message to the chat when a user connects or disconnects. When searching this site, some answers did not work, others just weren't my scenario and therefore could not work.
Index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(8080, function(){
console.log('listening on *:8080');
});
Index.html
<!doctype html>
<html>
<head>
<title>Derpzy.ML</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>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
496
asked Sep 18 '25 02:09
Haven't tested but you will want to do something like this.
Server side:
//when socket is connected
io.on('connection', function(socket){
console.log('Yay, connection was recorded')
//emit message to all front-end clients
io.emit('chat message', 'some message sent to all users');
//handling disconnects
socket.on('disconnect', function() {
io.emit('chat message', 'some user disconnected');
});
});
Client side:
//on io.emit from backend (notice 'chat message' event has same name as server side)
socket.on('chat message', function(msg){
console.log('Yay, I got a message back from the server: ', msg)
//handle the message however you would like
$('#messages').append($('<li>').text(msg));
});
To test the server, you can console.log within the 'connection' callback to ensure the backend is picking up the connections.
To test the client, you can console log within the 'chat message' callback to ensure the data is being received. Also, make sure to check your developer console to ensure the error isn't with how you are trying to append the data to the DOM.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
