2016-06-23 6 views
0

Ich studiere NodeJS zusammen mit Socket.io Ich habe eine sehr einfache Chat-Seite. Aber ich weiß nicht, wo ist mein Fehler.Kann einfache Broadcast-Nachricht in der HTML-Datei abrufen mit NodeJS/Socket.io

Hier ist mein einfacher Code:

index.js

var express = require('express'); 
var app = express(); 
app.use('/', express.static(__dirname + '/')); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

app.get('/', function(req, res){ 
    //res.send('<h1>Hello World</h1>'); 
    res.sendFile(__dirname + '/index.html'); 
}); 

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

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

index.html

<body> 
    <ul id="messages"></ul> 
    <form action=""> 
    <input id="m" autocomplete="on" /><button>Send</button> 
    </form> 
    <script type="text/javascript" src="jquery-1.12.4.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 
    var socket = io(); 
    $('form').submit(function() { 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
    }); 
    socket.on('chat message', function(msg) { 
     console.log(msg); //NO VALUE? 
    }); 
    </script> 
</body> 

Ich kann nicht den Wert in dieser Zeile erhalten:

socket.on('chat message', function(msg) { 
      console.log(msg); //NO VALUE? 
     }); 
+1

try ** var socket = io (“ http: // localhost: 3000 "); ** <- Sie sollten http: // vor localhost setzen, ich weiß nicht, Kommentar wird nicht angezeigt. – modernator

+0

immer noch den gleichen Effekt. Kein Wert. – Jerielle

+0

Socket.io und Node.JS verwenden das Websocket-Protokoll, das ist sehr unterschiedlich zu einem 'Socket' - ich bearbeite Ihre Frage, um das Tag zu reparieren. Bitte beachten Sie. – Myst

Antwort

2

Die Nachricht, da kann nicht mit

// Server: Receive and send message 
socket.on('chat message', function(msg) { 
    io.emit('chat message: ' + msg); 
} 

Sie ein Ereignis chat message: ${msg}, aber das ist ein Ereignis, das Sie auf der Client-Seite zu hören sind nicht genannt emittieren auf dem Client empfangen werden. Wenn Sie ein Ereignis ausgeben, müssen Sie zuerst den Ereignisnamen definieren und dann die Daten als second parameter in JSON format angeben. Ändern Sie den obigen Code zu

wird das Ereignis an den Client mit der Nachricht als die Daten ausgeben. Die gleiche Syntax gilt, wenn das Ereignis vom Client an den Server gesendet wird. So ändern

// Client: Send message 
$('form').submit(function() { 
    socket.emit('chat message', $('#m').val()); 

zu

// Client: send message 
$('form').submit(function() { 
    socket.emit('chat message', {message : $('#m').val()}); 

Wenn der Server Ihre Veranstaltung beantwortet haben, können Sie empfangen und die Nachricht wie folgt zugreifen:

// Client: Receive message 
socket.on('chat message', function(data) { 
    console.log(data.message); // VALUE :-) 
}); 
+0

danke für eine sehr klare Erklärung. Wie auch immer, ich folge diesem Tutorial Ich füge einfach eine Codezeile hinzu. http://socket.io/get-started/chat/ – Jerielle

Verwandte Themen