时间戳

首页 > 解决方案 > 所以，这是一个聊天应用程序，但在下面的代码中，我无法在用户之间建立连接

javascript - 所以，这是一个聊天应用程序，但在下面的代码中，我无法在用户之间建立连接

问题描述

所以，这里的问题是两个用户之间的连接没有建立......我已经安装了express，socket.io我不知道问题出在哪里请帮助我......代码运行良好并且全部...我尝试打开两个浏览器，然后在同一个端口上，我在“localhost:3000/chat”打开了相同的地址，该网站可以正常打开..但是当我尝试从一个页面发送消息时，它没有出现在接收端

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/chat', (req, res) => {
  res.sendFile(__dirname + '/chat.html');
});

io.on('connection', (socket) => {
  console.log('User Online');
  
  socket.on('codeboard-message', (msg) => {
    console.log('message: ' + msg);
    socket.broadcast.emit('message-from-others', msg);
  });
  
});

var server_port = process.env.YOUR_PORT || process.env.PORT || 3000;
http.listen(server_port, () => {
  console.log('listening on *:' + server_port);
});
<html>

    <head>
        <title> Chat </title>
        
        <style>
        
            * {
                font-family: sans-serif;
                margin: 0;
                padding: 0;
            }
        
            .header-area {
                height: 6%;
                background: rgb(0 127 255);
                box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2), 0 0 1rem rgba(0, 0, 0, 0.2);
                color: white;
                padding: 4px;
            }
            
            .message-area {
                height: 80%;
                padding: 3px;
                overflow: auto;
            }
            
            .typing-area {
                margin-top: 4px;
                padding: 4px;
                height: 8%;
            }
            
            .typing-box {
                width: 90%;
                height: 100%;
                resize: none;
                padding: 3px;
            }
            
            .send-button {
                border: 0;
                width: 9%;
                background: rgb(0 127 255);
                color: white;
                padding: 8px;
                font-size: 18px;
                position: absolute;
                margin: 8px;
            }
            
            .message-box {
                margin-top: 10px;
            }
            
            .others-message-box {
            }
            
            .my-message-box {
                text-align: right;
                background: white;
            }
            
            .message {
                max-width: 70%;
                border-radius: 5%;
                padding: 5px;
                box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2), 0 0 1rem rgba(0, 0, 0, 0.2);
            }
            
            .my-message {
                float: right;
                background: rgb(0 127 255);
                color: white;
            }
            
            .others-message {
                float: left;
                background: white;
            }
            
            .separator {
                width: 100%;
                height: 8px;
                float: left;
            }
        
        </style>
    </head>
    
    <body>
    
        <div class="header-area">
            <h1> Codeboard Global Chat </h1>
        </div>
        
        <div class="message-area" id="message-area">
            <!-- <div class="message-box others-message-box">
                <div class="message others-message"> Hi, How are you? </div>
                <div class="separator"></div>
            </div>
            
            <div class="message-box my-message-box">
                <div class="message my-message"> I am good, how are you doing? </div>
                <div class="separator"></div>
            </div> -->
        </div>
        
        <div class="typing-area">
            <textarea class="typing-box" id="typing-box"></textarea>
            <button class="send-button" onclick="sendMessage()"> Send </button>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js" integrity="sha512-v8ng/uGxkge3d1IJuEo6dJP8JViyvms0cly9pnbfRxT6/31c3dRWxIiwGnMSWwZjHKOuY3EVmijs7k1jz/9bLA==" crossorigin="anonymous"></script>
        <script>
            
            var socket;
            window.onload = function() {
                
                socket = io.connect('http://localhost:3000');
                
                socket.on('message-from-others', function(message){
                    var html = '<div class="message-box others-message-box">' +
                                '<div class="message others-message"> ' + message + ' </div>' +
                                '<div class="separator"></div>' +
                            '</div>';
                            
                    document.getElementById("message-area").innerHTML += html;
                })
            }
        
            function sendMessage() {
                var message = document.getElementById("typing-box").value;
                var html = '<div class="message-box my-message-box">' +
                                '<div class="message my-message"> ' + message + ' </div>' +
                                '<div class="separator"></div>' +
                            '</div>';
                            
                document.getElementById("message-area").innerHTML += html;
                document.getElementById("typing-box").value = "";
                
                socket.emit('codeboard-message', message);
            }
        
        </script>
    
    </body>

</html>

标签： javascripthtmlcssjson

解决方案

如果您查看检查器中的“网络”选项卡，您将看到对 http://localhost:3000/socket.io/?EIO=3&transport=polling 的请求的错误 400。

它说{"code":5,"message":"Unsupported protocol version"}这是由客户端和服务器之间的问题引起的。

如果你替换var io = require('socket.io')(http);为

const io = require("socket.io")({
  allowEIO3: true // false by default
}).listen(http)

在您的服务器文件中它应该可以工作！

推荐阅读