2016-09-22 4 views
0

socket.ioウェブサイトにあるsocket.ioを使用してnode.jsにチャットサーバーを実装しようとしていました。クライアント側のHTMLコードで作成したリストにメッセージが追加されていないことを除いて、すべてうまくいくようです。 誰かが私が間違っていることを教えてもらえますか?socket.ioを使用したチャットサーバー、リストに追加されていないメッセージ

サーバコード

var express = require('express'); 
var soc = require('socket.io') 
var http = require('http'); 
var ip = require('ip'); 

var app = express(); 
var server = http.createServer(app).listen(3000); 
var io = soc(server); 

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

io.on('connection', function(socket) { 
    var address = socket.handshake.address; 
    var pos = address.indexOf('1'); 
    var len = address.length; 
    address = address.slice(-1 * (len - pos)); 
    /*if(address[0] === ':') { 
     address = ip.address(); 
    }*/ 
    console.log(address + ' connected'); 
    socket.on('disconnect', function() { 
     console.log(address + ' disconnected'); 
    }); 
    socket.on('message', function(message) { 
     io.emit('update', message); 
    }); 
}); 

クライアントコード

<html> 
<head></head> 
<body> 
    <form id="form" action="" style="position: absolute; bottom: 0; width: 100%;"> 
     Chat: <input style="width: 90%;" type="text" name="chat"> 
     <input type="submit" style="margin: 2px 50%"> 
    </form> 
    <ul id="myList"></ul> 
<script src="/socket.io/socket.io.js"></script> 
<script> 
    var myList = document.getElementById('myList'); 
    var socket = io(); 
    var form = document.getElementById("form"); 
    form.addEventListener("submit", function() { 
     socket.emit('message', form.chat.value); 
    }); 
    socket.on('update', function(msg) { 
     var node = document.createElement('li'); 
     var textnode = document.createTextNode(msg); 
     node.appendChild(textnode); 
     document.getElementById('myList').appendChild(node); 
    }); 
</script> 
</body> 

+0

はchat.htmlで提出ハンドラーに渡さthatsのイベントにpreventDefault()を呼び出してみては?更新コールバックでデータを取得しますか? –

+0

はい、それはノードモンを使用しています...はい、私は更新コールバックのデータを取得しています。 @JeremyJackson –

+0

アップデートコールバックでは、別のイベントが発生し、メッセージを受信したかどうかを確認するためにサーバーコンソールにメッセージを送信しました。はい、受信していますが、まだ追加されていません。 @JeremyJackson –

答えて

1

これは、リストに追加していますが、ページが結果として再読み込みしたときに、すぐにクリアされますフォームを提出します。例を挙げて行っている間、あなたのノードサーバを再起動しました

form.addEventListener("submit", function(event) { 
    event.preventDefault(); 
    socket.emit('message', form.chat.value); 
}); 
関連する問題