I've searched on Google a lot, but I cannot find any answers for my specific situation. I want to display the names of the users who are online in my chat room in the div element whose id is "numero". My code is divided into two JS pages and a HTML page:
index.js:
var express = require('express');
var socket = require('socket.io');
//app setup
var app = express();
var server = app.listen(8080, function(){
console.log('ascoltando la richiesta alla porta 8080');
});
//static
app.use(express.static('public'));
//socket setup
var io = socket(server);
io.on('connection', function(socket){
console.log('fatta la connessione socket', socket.id);
socket.on('chat', function(data) {
io.emit('chat', data);
});
socket.on('typing', function(data) {
socket.broadcast.emit('typing', data);
});
});
chat.js (which is the file linked to the html page):
//connessione
var socket = io.connect('http://localhost:8080'); // è una variabile socket diversa da quella in index.js
//query
var message= document.getElementById('message');
var handle = document.getElementById('handle');
var button = document.getElementById('send');
var output = document.getElementById('output');
var feedback = document.getElementById('feedback');
//scrollbar sempre in basso
function updateScroll(){
var element = document.getElementById("output");
element.scrollTop = element.scrollHeight;
}
//emit eventi
button.addEventListener('click',function() {
socket.emit('chat', {
message: message.value,
handle: handle.value
});
});
message.addEventListener('keypress', function() {
socket.emit('typing', handle.value);
});
//listen eventi
socket.on('chat', function(data){
if (data.message !== "" & data.handle !== "") {
if (handle.value === data.handle) {
feedback.innerHTML= "" ;
output.innerHTML +='<p id=inviato>' +'<span id="utente">'+'Tu' +'</span> <br> ' + data.message +'</p> <br>';
updateScroll();
document.getElementById('message').value='';
} else {
feedback.innerHTML= "" ;
output.innerHTML +='<p id=ricevuto>' +'<span id="utente">'+data.handle +'</span> <br> ' + data.message +'</p> <br>';
updateScroll();
document.getElementById('message').value='';
}
}
});
socket.on('typing', function(data) {
feedback.innerHTML = '<p>'+ data + ' sta scrivendo...' + io.engine.clientsCount;
});
Here there is the html code, so you can understand the elements I used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MEETY - Torino</title>
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="icona.ico">
</head>
<body id="index-body">
<div id="output"></div>
<script src="/chat.js"></script>
<input type="text" id="message" placeholder="Cosa vorresti fare..." maxlength="100" required>
<button id="send" ><i class="fa fa-send-o"></i></button>
<aside>
<input id="handle" type="text" placeholder="Il tuo nome" maxlength="18" required>
<p>Sei a Torino <br> <br> Vai a <a href="milano.html">Milano</a> </p>
<p id="home"><a href="home.html"><i class="fa fa-home"></i></a></p>
<div id="feedback"><div id="segnaposto"></div></div>
<div id="numero"></div>
</aside>
<script src="/chat.js"></script>
</body>
</html>
