Question

我有一个非常简单的Express和Socket聊天应用程序。我在接收输入字段中输入的消息时看到了显着的延迟（15-20秒），并且在本地设置中显示了所有内容的is typing messages。

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Let's Chat</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>

        body {
            padding-top: 1.5em;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        .container-fluid {
            padding: 0;
        }

        .form-control {
            border: 1px solid cornflowerblue;
            border-radius: 0;
            position: absolute;
            bottom: 0;
            height: 3em;
        }

        [v-cloak] {
            display: none;
        }

    </style>
</head>
<body>

    <div class="container-fluid chat">

        <p class="lead text-center">Let's chat!</p>

        <ul>
            <li v-for="message in messages">{{ message }}</li>
        </ul>

        <input type="text" class="form-control" v-model="message" placeholder="Type your message..." @keyup.enter="send" @keydown="isTyping" v-cloak>

    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>

        const socket = io();

        let typingState = false;

        const app = new Vue({
            el: '.chat',
            data: {
                message: '',
                messages: []
            },
            methods: {
                send: function (e) {
                    this.messages.push('You → ' + this.message);
                    socket.emit('message', socket.id, this.message);
                    this.message = ''
                    $('.form-control:eq(0)').blur();
                    typingState = false;
                },

                isTyping: function (e) {
                    if(typingState == false) {
                        socket.emit('isTyping', socket.id);
                        typingState = true;
                    }
                }
            },
            mounted: function () {
                socket.on('message', function (message) {
                    app.messages.push(message);
                });
            }
        })

    </script>


</body>
</html>

app.js

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const faker = require('faker');
const _ = require('lodash');

let users = [];

let user = function (userName, socketID) {
    this.userName = userName;
    this.socketID = socketID;
    this.isTyping = false;
};

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

io.on('connection', (socket) => {

    let name = faker.name.findName();
    socket.broadcast.emit('message', name + ' joined!');
    users.push(new user(name, socket.id));


    socket.on('disconnect', () => {
       _.map(users, (o) => {
           if(o.socketID == socket.id) {
               socket.broadcast.emit('message', o.userName + ' left!');
           }
       });
    });

    socket.on('isTyping', (socketID) => {
        _.map(users, (o) => {
            if(o.socketID == socketID && o.isTyping == false) {
                socket.broadcast.emit('message', o.userName + ' is typing...');
                o.isTyping = true;
            }
        });
    });

    socket.on('message', (socketID, message) => {
        _.map(users, (o) => {
            if(o.socketID == socketID) {
                socket.broadcast.emit('message', o.userName + ' → ' + message);
                o.isTyping = false;
            }
        });
    });

});

server.listen('3000', () => {
   console.log('Server is listening on port 3000!');
});

可能是什么原因，我怎么可能克服它？

SOCKET.IO - 发送消息的重大延迟

0 个答案: