Socket.io tutorial erstellt zusätzliche Nachrichten

Ich folge der Socket.IO tutorial, aber ich bin auf ein Problem, wo die Anzahl der Nachrichten, die auf der Seite angezeigt exponentiell steigen, wodurch der Chat-Client unwirksam.Socket.io tutorial erstellt zusätzliche Nachrichten

Einige flüchtige Suche sagt mir, dass es Event-Handler beteiligt, aber ich habe nichts definitives darüber gefunden, wie man sie in diesem Zusammenhang verwendet. Was und wo benötige ich diese Event-Handler und warum?

Mein index.js:

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

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

io.on('connection', function(socket){ 
    // console.log('a user connected'); 
    // socket.on('disconnect', function(){ 
    // console.log('user disconnected'); 
    // }); 
    socket.on('chat message', function(msg){ 
    //console.log('message: ' + msg); 
    io.emit('chat message', msg); 
    }); 
}); 

http.listen(8080, function(){ 
    console.log('listening on *:8080'); 
});

Und mein HTML:

<!doctype html> 
<html> 
    <head> 
    <title>Socket.IO chat</title> 
    <style> 
     * { margin: 0; padding: 0; box-sizing: border-box; } 
     body { font: 13px Helvetica, Arial; } 
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
     #messages { list-style-type: none; margin: 0; padding: 0; } 
     #messages li { padding: 5px 10px; } 
     #messages li:nth-child(odd) { background: #eee; } 
    </style> 
    </head> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 

    function doDid(){ 
     var socket = io(); 
     $('form').submit(function(){ 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
     }); 
     socket.on('chat message', function(msg){ 
     $('#messages').append($('<li>').text(msg)); 
     }); 
    }; 
    </script> 
    <body> 
    <ul id="messages"></ul> 
    <form action=""> 
     <input id="m" autocomplete="off" /><button onclick="doDid()">Send</button> 
    </form> 
    </body> 
</html>

Quelle

2016-05-12 Thassa

Das Problem besteht darin, dass Sie das Ereignis "Chatnachricht" bei jedem Drücken der Taste abonnieren.

Sie sollten nur diesen Code einmal ausgeführt:

var socket = io(); 

    socket.on('chat message', function(msg){ 
    $('#messages').append($('<li>').text(msg)); 
    });

So sollten Sie Ihren Code ändern wie folgt aus:

<script> 
    var socket = io(); 

    socket.on('chat message', function(msg){ 
    $('#messages').append($('<li>').text(msg)); 
    }); 

    function doDid(){ 
     $('form').submit(function(){ 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
    }); 
    }; 
    </script>

Quelle

2016-05-12 17:42:07

var socket = io();

Diese Linie eine Verbindung Socket.io schafft. Bei jedem Anruf erstellen Sie eine andere Verbindung. Versuchen Sie, das nur einmal statt bei jedem Senden anzurufen.

Um zu klären, die io() Funktion ist eine Fabrik kein Accessor.

bearbeiten:

Sieht aus wie der socket.io Client-Cache-Sockets tatsächlich tut es schafft und schafft nicht mehrere Verbindungen.

Allerdings habe ich auch bemerkt, dass Sie Ereignisse in dieser Funktion binden, aber sie mit jedem Klick aufrufen, so dass Sie jedes Mal neu binden. Rufen Sie Ihre Funktion nur einmal beim Start auf.

Quelle

2016-05-12 15:27:34 Chad

hilfreich zu wissen, aber das Problem mit mehreren Nachrichten auftritt. – Thassa

@Thassa müssen Sie 'var socket = io()' _and_ 'socket.on()' außerhalb von 'doDid()' vollständig verschieben. – robertklep

Verschieben Sie einfach Ihre Ereignisbehandlung. Sie sind bereits an das Submit-Ereignis gebunden, rufen Sie diese Funktion auch nicht beim Senden auf. Rufen Sie es beim Laden der Seite an. – Chad

Socket.io tutorial erstellt zusätzliche Nachrichten

Antwort

Verwandte Themen