Sol websockets chat
De wikiserver
CLIENTE
´
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Chat la Mercè</title>
<script src="./node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
var socket = io.connect('http://localhost:8080', { 'forceNew': true });
socket.on('messages', function(data) {
console.log(data);
render(data);
})
function render (data) {
var html = data.map(function(elem, index) {
return(`<div>
<strong>${elem.nombre}</strong>:
<em>${elem.text}</em>
</div>`);
}).join(" ");
document.getElementById('messages').innerHTML = html;
}
function addMessage(e) {
var message = {
nombre: document.getElementById('username').value,
text: document.getElementById('texto').value
};
socket.emit('new-message', message);
return false;
}
</script>
</head>
<body>
<h1>CHAT LA MERCÈ</h1>
<div id="messages"></div>
<br/>
<form onsubmit="return addMessage(this)">
<input type="text" id="username" placeholder="Tu Nombre" >
<input type="text" id="texto" placeholder="Cuéntanos algo...">
<input type="submit" value="Enviar!">
</form>
</body>
</html>SERVER.JS
var express = require('express');
var app = express();
var path = require('path');
var server = require('http').Server(app);
var io = require('socket.io')(server);
app.use(express.static(path.join(__dirname, '/'))); //Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript,
server.listen(8080, function() { ////Pondremos el servidor a escuchar en localhost con el puerto 8080
console.log('Servidor corriendo en http://localhost:8080');
});
var messages = [{
nombre: "Julio",
text: "Hola! ¿qué haces?"
},{
nombre: "Albert",
text: "haciendo un poco de JSP"
},{
nombre: "ALex",
text: "Qué alegria!"
}];
io.on('connection', function(puertoSocket) {
console.log('Alguien se ha conectado con Sockets');
puertoSocket.emit('messages', messages);
puertoSocket.on('new-message', function(data) {
messages.push(data);
io.sockets.emit('messages', messages);
});
});
