尝试将客户端连接到服务器时出现Node.js Socket.io错误答案

【问题标题】：Node.js Socket.io Error when trying to connect client to server尝试将客户端连接到服务器时出现Node.js Socket.io错误
【发布时间】：2022-01-20 18:10:25
【问题描述】：

我正在尝试创建一个网络聊天，为此我们首先需要通过 Node 和 Socket.io 建立一个客户端到服务器的连接 - 但它不起作用。

服务器代码在这里： https://collectiveboost.com/cb_node/chat_app/server.js

并且通过以下方式启动时运行良好：node server.js 将结果打印到 putty 命令行：“Socket io Server Chat Started...”

但是在客户端，socket.io 连接没有发生:( 我们已经尝试了两种方式，即通过全局 socket.io，如您在此处看到的： https://collectiveboost.com/cb_node/chat_app/index.htm

这会导致错误：加载资源失败：服务器响应状态为 404（未找到）未捕获的引用错误：io 未在 (index):14 处定义

通过客户端 JS 文件的本地版本，可以通过以下方式访问：node_modules/socket.io/client-dist/socket.io.js 如上所述： https://socket.io/get-started/chat

你可以在这里看到： https://collectiveboost.com/cb_node/chat_app/index_2.htm

这会导致错误： polling-xhr.js:157 GET https://collectiveboost.com/socket.io/?EIO=4&transport=polling&t=Nt9UN_R 404（未找到）

那么我们做错了什么？我们如何将客户端网页socket.io连接到服务器？

谢谢

【问题讨论】：

标签： node.js websocket socket.io

【解决方案1】：

请尝试此代码，它对您非常有用。它是一个基本的简单聊天系统。

服务器代码

var app = require('express')();
    var http = require('http').Server(app);
    var io = require('socket.io')(http);
    
    app.get('/', function(req, res) {
        res.sendFile(__dirname + '/index6.html');
    });
    var username = '';
    var rooms;
    io.on('connection', function(socket) {
        console.log("User connected");
        socket.on('join', function(name) {
            username = name;
            //console.log(username)
            io.emit('chat-msg', `${username.toUpperCase()} Welcome`);
        })
        socket.join(rooms)
        socket.on('chat msg', function(msg) {
            //console.log(msg);
            io.sockets.in(rooms).emit('chat msg', msg)
                //console.log(array)
        })
    
        socket.on('disconnect', function(name) {
            console.log("disconnet")
            io.emit('chat-msg', `${username.toUpperCase()} disconnected`)
        })
    
    });
    
    http.listen(5600, function() {
        console.log('listening on localhost:5600');
    });

客户端代码

<!DOCTYPE html>
<html>

<body>
    <div class="box">
        <ul id="messages">

        </ul>
        <ul id="messages1">
        </ul>

        <form action="">
            <input id="inp" placeholder="Enter your message..." autocomplete="off" required /><button>Send</button>
        </form>
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            var name = prompt("enter name")
            var socket = io();
            socket.emit('join', name);


            $('form').submit(function(event) {
                event.preventDefault();
                socket.emit("chat msg", (name + " : " + $("#inp").val()));
                //$('#messages').append($('<li id="list">').text('You: ' +$('#inp').val()));
                $('#inp').val('');
            });

            socket.on('chat-msg', function(msg) {
                $('#messages').append($('<li id="list"><br>').text(msg));

            })
            socket.on('chat msg', function(msg) {
                $('#messages1').append($('<li id="list1"><br>').text(msg));

            })
            socket.on('left', function(data) {
                document.write(data.description)
            })
        </script>
    </div>
    <style>
        .box {
            border: 1px solid red;
            height: auto;
            width: 500px;
            position: absolute;
            right: 300px;
            border-radius: 10px;
            padding: 30px;
        }
        
        #inp {
            position: absolute;
            bottom: 10px;
            right: 200px;
            outline: none;
            border: soild blue;
            border-radius: 5px;
        }
        
        ul {
            list-style-type: none;
            padding: 50px;
            text-align: center;
        }
        
        #list {
            text-align: center;
            background-color: #6195e8;
            color: #fffafa;
            border-radius: 10px;
        }
        
        #list1 {
            text-align: right;
            background-color: #6bdde3;
            color: #ed001c;
        }
        
        button {
            color: White;
            background-color: green;
            width: 80px;
            border-radius: 10px;
            position: absolute;
            right: 150px;
            bottom: 10px;
        }
        
        #messages li {
            padding: 5px 10px;
        }
    </style>
</body>



</html>

【讨论】：

谢谢。但我确实有聊天的代码。我的问题/问题是客户端的 Socket.io 代码没有与聊天的基于节点的服务器部分建立连接。也就是说，此代码不会导致浏览器到服务器连接：导致我在问题中发布的错误。这就是我需要回答的全部内容。再次感谢大家。
试试这个