socket.io 和节点 js：聊天不显示在屏幕上

Question

我正在尝试 socket.io 通过创建实时聊天，提交消息时页面会自行刷新，这是标记和客户端 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>

这是服务器端 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);
    });
});

我知道你们不需要这个，但这是 package.json:

{
"name":"test_chat_application",
"version":"0.0.1",
"private":"true",
"dependencies":{
    "socket.io":"1.4.8",
    "express":"4.14.0"
}

}

基本上我认为问题是页面刷新！请帮助..

Answer 1

我认为您应该添加 return false 以防止表单被 'really' 提交（从而刷新页面）。我认为提交事件没有冒泡，所以 e.preventDefault 在这种情况下不起作用。

$message_form.submit(function(e){
  e.preventDefault();
  socket.emit('send message', $message_box.val());
  $message_box.val('');
  return false;         
})

Answer 2

<div class="chat"></div> <!-- this is class -->

// But you are using

var $chat = $('#chat');

同时将 chat 容器移到 form#send_message 之外并使用 document.ready

这应该很好用

<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>

更好的方法

因为您正在使用套接字（ajax 的一种）- 您失去了表单元素的所有好处，所以根本不要使用它

<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>

Answer 3

你必须放弃表格，更新一些东西（比如 var socket = io() 而不是 var socket = io.connect() 和东西）并用 onclick 事件而不是处理你的发送按钮表单提交。这样你就不会刷新了。

无论如何，更新后的 server.js:

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>

试试这个，如果有效请告诉我

socket.io 和节点 js：聊天不显示在屏幕上

socket.io and node js: chat does not display on screen

livechat

websocket

node.js

socket.io

这应该很好用

更好的方法