http://wikiserver.infomerce.es/index.php?action=history&feed=atom&title=Sol_websockets_chat
Sol websockets chat - Historial de revisió
2026-05-09T15:26:12Z
Historial de revisió per a aquesta pàgina del wiki
MediaWiki 1.28.0
http://wikiserver.infomerce.es/index.php?title=Sol_websockets_chat&diff=8971&oldid=prev
Jnoguera a 18:59, 6 gen 2018
2018-01-06T18:59:23Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;' lang='ca'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Versió més antiga</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revisió del 18:59, 6 gen 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Línia 1:</td>
<td colspan="2" class="diff-lineno">Línia 1:</td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">CLIENTE</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><source lang="html">´</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><source lang="html">´</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><!DOCTYPE html></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><!DOCTYPE html></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l51" >Línia 51:</td>
<td colspan="2" class="diff-lineno">Línia 52:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">SERVER.JS</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><source lang="javascript"></div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div><source lang="javascript"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Jnoguera
http://wikiserver.infomerce.es/index.php?title=Sol_websockets_chat&diff=8970&oldid=prev
Jnoguera: Es crea la pàgina amb «<source lang="html">´ <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Chat la Mercè</title> <script src="./node_modules/socket.io-client/d...».
2018-01-06T18:59:01Z
<p>Es crea la pàgina amb «<source lang="html">´ <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Chat la Mercè</title> <script src="./node_modules/socket.io-client/d...».</p>
<p><b>Pàgina nova</b></p><div><source lang="html">´<br />
<!DOCTYPE html><br />
<html lang="es"><br />
<head><br />
<meta charset="UTF-8"><br />
<title>Chat la Mercè</title><br />
<script src="./node_modules/socket.io-client/dist/socket.io.js"></script><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><br />
<script ><br />
<br />
var socket = io.connect('http://localhost:8080', { 'forceNew': true });<br />
<br />
socket.on('messages', function(data) {<br />
console.log(data);<br />
render(data);<br />
})<br />
<br />
function render (data) {<br />
var html = data.map(function(elem, index) {<br />
return(`<div><br />
<strong>${elem.nombre}</strong>:<br />
<em>${elem.text}</em><br />
</div>`);<br />
}).join(" ");<br />
<br />
document.getElementById('messages').innerHTML = html;<br />
}<br />
<br />
function addMessage(e) {<br />
var message = {<br />
nombre: document.getElementById('username').value,<br />
text: document.getElementById('texto').value<br />
};<br />
<br />
socket.emit('new-message', message);<br />
return false;<br />
}<br />
</script><br />
</head><br />
<body><br />
<h1>CHAT LA MERCÈ</h1><br />
<div id="messages"></div><br />
<br/><br />
<form onsubmit="return addMessage(this)"><br />
<input type="text" id="username" placeholder="Tu Nombre" ><br />
<input type="text" id="texto" placeholder="Cuéntanos algo..."><br />
<input type="submit" value="Enviar!"><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<source lang="javascript"><br />
<br />
var express = require('express');<br />
var app = express();<br />
var path = require('path');<br />
var server = require('http').Server(app);<br />
var io = require('socket.io')(server);<br />
<br />
<br />
app.use(express.static(path.join(__dirname, '/'))); //Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript,<br />
<br />
<br />
server.listen(8080, function() { ////Pondremos el servidor a escuchar en localhost con el puerto 8080<br />
console.log('Servidor corriendo en http://localhost:8080');<br />
});<br />
<br />
<br />
<br />
var messages = [{<br />
nombre: "Julio",<br />
text: "Hola! ¿qué haces?"<br />
},{<br />
nombre: "Albert",<br />
text: "haciendo un poco de JSP"<br />
},{<br />
nombre: "ALex",<br />
text: "Qué alegria!"<br />
}];<br />
<br />
io.on('connection', function(puertoSocket) {<br />
console.log('Alguien se ha conectado con Sockets');<br />
puertoSocket.emit('messages', messages);<br />
<br />
<br />
<br />
puertoSocket.on('new-message', function(data) {<br />
messages.push(data);<br />
<br />
io.sockets.emit('messages', messages); <br />
});<br />
});<br />
</source></div>
Jnoguera