聊天服务器使用套接字.消息没有添加到列表中

Chat server using socket.io, message not appending to list

本文关键字：添加 列表 消息 服务器 套接字 聊天      更新时间：2023-09-26

我试图在node.js中使用套接字实现聊天服务器。如套接字所示。io的网站。一切似乎都很好，除了消息没有被附加到我在客户端HTML代码上所做的列表中。有人能告诉我我哪里做错了吗?

服务器代码 

var express = require('express');
var soc = require('socket.io')
var http = require('http');
var ip = require('ip');
var app = express();
var server = http.createServer(app).listen(3000);
var io = soc(server);
app.get('/', function(req, res) {
    res.sendFile(__dirname + "/chat.html");
});
io.on('connection', function(socket) {
    var address = socket.handshake.address;
    var pos = address.indexOf('1');
    var len = address.length;
    address = address.slice(-1 * (len - pos));
    /*if(address[0] === ':') {
        address = ip.address();
    }*/
    console.log(address + ' connected');
    socket.on('disconnect', function() {
        console.log(address + ' disconnected');
    });
    socket.on('message', function(message) {
        io.emit('update', message);
    });
});
客户机代码

<html>
<head></head>
<body>
    <form id="form" action="" style="position: absolute; bottom: 0; width: 100%;">
        Chat: <input style="width: 90%;" type="text" name="chat">
        <input type="submit" style="margin: 2px 50%">
    </form>
    <ul id="myList"></ul>
<script src="/socket.io/socket.io.js"></script>
<script>
    var myList = document.getElementById('myList');
    var socket = io();
    var form = document.getElementById("form");
    form.addEventListener("submit", function() {
        socket.emit('message', form.chat.value);
    });
    socket.on('update', function(msg) {
        var node = document.createElement('li');
        var textnode = document.createTextNode(msg);
        node.appendChild(textnode);
        document.getElementById('myList').appendChild(node);
    });
</script>
</body>

它确实将它添加到列表中，但是当您提交表单时页面重新加载时，它会立即被清除。

尝试在chat.html中传入提交处理程序的事件上调用preventDefault():

form.addEventListener("submit", function(event) {
    event.preventDefault();
    socket.emit('message', form.chat.value);
});
相关文章：