2014-10-08 22 views
13

Nihayet Node.js'e bir şans vermeye karar verdim. Buz kırmak için küçük bir sohbet uygulaması ile gitmeye karar verdim. Takip ettiğim eğitim doğrudan socket.io sitesinden.Socket.io Sohbet Eğitimi düzgün çalışmıyor

http://socket.io/get-started/chat/

Ben kelime için öğretici kelimeyi takip ediyorum ve hatta kaynağına kodu kopyalayıp yapıştırmak denedim ve metni yazın ve gönderin zaman hiçbir yerde alıyorum. Komut isteminde geliyor olmalı, ancak değil.

Kullanıcı bağlandım ve kullanıcı bağlantısı kesildi mesajlar göründü ama adım adım takipçiyi takip ettiğim için bu konuda güldüm.

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('/chat/index.html'); 
}); 

io.on('connection', function(socket){ 
    socket.on('chat message', function(msg){ 
     console.log('message: ' + msg); 
    }); 
}); 

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

Index.html: Ben varsayıyorum

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Chat</title> 

    <script src="/socket.io/socket.io.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
     var socket = io(); 
     $('form').submit(function(){ 
      socket.emit('chat message', $('#m').val()); 
      $('#m').val(''); 
      return false; 
     }); 
    </script> 

    <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> 
<body> 

    <ul id="messages"></ul> 

    <form action=""> 
     <input id="m" autocomplete="off" /><button>Send</button> 
    </form> 

</body> 
</html> 

Bazı yerde batırmıştır ama denemek ve kopyalayıp yapıştırın vermedi rağmen görmüyorum. Ayrıca, önemliyse, Windows 8.1 ve Chrome kullanıyorum. Etrafımı kontrol ettim ve bu sorunun cevabını bulamadım. Herhangi bir yardım harika olurdu.

DÜZENLEME: Sorun jQuery ile yapıldı, çünkü bazı nedenlerden dolayı yanıt vermiyor. Betiği vanilyada yeniden yazdıktan sonra amaçlanan şekilde çalışır.

Index.js - JavaScript

<script> 
    var socket = io(); 

    function sendMessage() { 
     var msg = document.getElementById('m'); 

     socket.emit('message', msg.value); 
     msg.value = ''; 
     return false; 
    } 
</script> 

HTML:

<form action="" onsubmit="javascript:sendMessage();"> 
     <input id="m" autocomplete="off" /><button>Send</button> 
</form> 
+0

Herhangi bir sunucu ve istemci tarafı konsol çıkışı sağlayabilir misiniz? – jmar777

+0

Her iki tarafta da hata yok. Thats ne sinir bozucu buluyorum. –

cevap

14

Sen konsolda yazarak Chrome'da Socket.IO için günlüğünü etkinleştirebilirsiniz:

localStorage.debug = "socket.io-client:socket" 

ve üzerinde sunucu tarafı:

012 Belge bunu biraz geciktirmek gerekir böylece jQuery kullanmak için, hazır olduğunda

Ayrıca, komut yürütülecek istiyorum: aslında sonra

$(document).ready(function() { 
    var socket = io(); 
    $('form').submit(function(){ 
     socket.emit('chat message', $('#m').val()); 
     $('#m').val(''); 
     return false; 
    }); 
}); 
+0

Sadece "socket.io-client: soket taşıma açık - bağlantı + 0ms" alıyorum. Başka hiçbir şey. Bütün bunlar localhost üzerinde çalışıyor. –

+0

Sunucu tarafı ne olacak? – xShirase

+0

"break in index.js: 1" –

6

Biraz ama ben Aynı sorunu ve bir yükleme sırası sorununa geri bağladı. Yalnızca forma bağlanan kodu, <head> yerine <body>'un altına taşıyın. Öğreticinin önceki kodunun bir kısmı doğrudan <head>'da olduğu için biraz yanıltıcıdır.