node.js - node - socket.io chat rooms example
socket.io y nodo js: chat no se muestra en la pantalla (3)
Estuve probando socket.io creando un chat en vivo, y la página se actualiza cuando se envía el mensaje, aquí está el marcado y el lado del cliente JS (index.html):
<body>
<h1>Open chat</h1>
<form id="send_message">
<div class="chat">
</div>
<hr />
<input size="28" type="text" id="message" />
<input type="submit" value="send" />
</form>
<script src="http://code.jquery.com/jquery-latest-min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
JQuery(function($){
var socket = io.connect();
var $message_form = $(''#send_message'');
var $message_box = $(''#message'');
var $chat = $(''#chat'');
$message_form.submit(function(e){
e.preventDefault();
socket.emit(''send message'', $message_box.val());
$message_box.val('''');
})
});
socket.on(''new message'', function(data){
$chat.append(data+''<br />'');
});
</script>
</body>
y aquí está el lado del servidor js (app.js):
var express = require(''express''),
app = express(),
server = require(''http'').createServer(app),
io = require(''socket.io'').listen(server);
server.listen(3000);
app.get(''/'',function(req, res){
res.sendfile(__dirname + ''/index.html'');
});
io.sockets.on(''connection'',function(socket){
socket.on(''send message'', function(data){
io.sockets.emit(''new message'',data);
});
});
Sé que ustedes no necesitarán esto, pero esto es package.json:
{
"name":"test_chat_application",
"version":"0.0.1",
"private":"true",
"dependencies":{
"socket.io":"1.4.8",
"express":"4.14.0"
}
}
Básicamente, creo que el problema es la actualización de la página. por favor ayuda..
Creo que deberías agregar el resultado return false para evitar que el formulario sea ''realmente'' enviado (y por lo tanto actualizar la página). Enviar evento no está burbujeando, creo, así que e.preventDefault no funciona en este caso.
$message_form.submit(function(e){
e.preventDefault();
socket.emit(''send message'', $message_box.val());
$message_box.val('''');
return false;
})
Tienes que abandonar el formulario, actualizar algunas cosas (como var socket = io () en lugar de var socket = io.connect () y demás) y manejar tu botón de envío con eventos onclick en lugar de envíos de formularios. De esa forma no actualizarás.
De todos modos, el server.js actualizado:
var express = require(''express''),
app = express(),
server = require(''http'').createServer(app),
io = require(''socket.io'').listen(server);
server.listen(3000);
app.use(express.static(''./''));
app.get(''/'',function(req, res){
res.sendFile(__dirname + ''/index.html'');
});
io.on(''connection'',function(socket){
console.log(''SOMEONE CONNECTED:'', socket.id);
socket.on(''send'', function(data){
console.log(data);
io.sockets.emit(''new'', data);
});
});
index.html
<body>
<h1>Open chat</h1>
<div class="chat">
<ul id="messages">
</ul>
</div>
<hr />
<input size="28" type="text" id="message" />
<input type="button" onclick="send()" value="send" />
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
var socket = io();
function send(){
var message = document.getElementById("message").value;
socket.emit("send", { "message" : message });
document.getElementById("message").value = "";
}
socket.on("new", function(data){
console.log("NEW MESSAGE : ", data);
var chatMessage = document.createElement("li");
chatMessage.innerHTML = data.message;
document.getElementById("messages").appendChild(chatMessage)
});
</script>
Prueba esto y avísame si funciona
<div class="chat"></div> <!-- this is class -->
// But you are using
var $chat = $(''#chat'');
También mueva el contenedor de chat fuera del form#send_message y use document.ready
esto debería funcionar bien
<div class="chat"></div>
<hr />
<form id="send_message">
<input size="28" type="text" id="message" />
<input type="submit" value="send" />
</form>
<script>
$(document).ready(function() {
var socket = io.connect();
var $message_form = $(''#send_message'');
var $message_box = $(''#message'');
var $chat = $(''#chat'');
$message_form.submit(function(e){
e.preventDefault();
socket.emit(''send message'', $message_box.val());
$message_box.val('''');
});
socket.on(''new message'', function(data){
$chat.append(data+''<br />'');
});
});
</script>
mejor manera
A medida que usa socket (qué tipo de ajax) - pierde todos los beneficios del elemento de forma, así que simplemente no lo use
<div class="chat"></div>
<hr />
<input size="28" type="text" id="message"/>
<button id="send_message">send</button>
<script>
$(document).ready(function() {
var socket = io.connect();
var $message_form = $(''#send_message'');
var $message_box = $(''#message'');
var $chat = $(''#chat'');
$message_form.click(function(){
socket.emit(''send message'', $message_box.val());
$message_box.val('''');
});
socket.on(''new message'', function(data){
$chat.append(data+''<br />'');
});
});
</script>