2012-11-26 6 views
1

저는 여기에 걸려 들었고 도움이 될 것입니다. 저는 Node.js, Socket.io 및 Express를 처음 사용합니다. 저는 방금 학습을 시작했으나 빠른 진행을했습니다. 간단한 웹 채트 응용 프로그램을 만들려고하는데 문제가 생겼습니다. 제출할 때 서버로 보내지고 서버가 콘솔에 값을 기록하는 텍스트 상자가있는 양식을 설정했습니다. 유일한 문제는 콘솔에 로그인하지 않는 것입니다.Socket.io 메시지 이벤트가 클라이언트에서 서버로 방출되지 않습니다.

서버와 클라이언트가 잘 연결됩니다. 클라이언트가 연결될 때 console.log ("클라이언트 연결 ...") 메시지가 나타나지만 메시지 이벤트 이미 터가 작동하지 않는 것 같습니다. 오래된 코드를 사용하고 있습니까? 구문이 잘못 되었습니까? 나는 몇 시간 동안 답을 찾아 보았지만 아무 것도 찾지 못했습니다.

내 응용 프로그램은 app.js, index.html 및/public/default.css로 구분됩니다.

App.js :

var express = require('express'); 
var app = express(); 
var http = require('http'); 
var server = http.createServer(app); 
var io = require('socket.io').listen(server); 

io.sockets.on('connection', function(client) { 
    console.log("Client connected..."); 
    client.on('messages', function(data) { 
    console.log(data); 
    }); 
}); 

app.use('/public', express.static(__dirname + '/public')); 

app.get('/', function(request, response) { 
response.sendfile(__dirname + "/index.html"); 
}); 

server.listen(3000); 
console.log("Listening on port 3000"); 

index.html을 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chatapp</title> 
    <link rel="stylesheet" type="text/css" href="public/default.css"></link> 
</head> 
<body> 
    <h1 class="title">Chatapp</h1> 

    <div id="wrapper"> 
     <div id="online"> 

     </div> 

     <div id="body"> 

     </div> 

     <div id="input"> 
      <form id="chatform"> 
       <input type="text" id="message"></input> 
       <input type="submit" id="send" value="Send!"></input> 
      </form> 
     </div> 
     <div class="clear"></div> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <script> 
     $(document).ready(function() { 
      var server = io.connect('http://localhost:3000'); 
      $('#chatform').submit(function(e) { 
       e.preventDefault(); 
       var message = $('#message').val(); 
       socket.emit('messages', message); 
      }); 
     }); 
    </script> 
</body> 
</html> 

/public/default.css :

body { 
    margin: 0; 
    padding: 0; 
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; 
} 

a { 
    color: #00B7FF; 
} 

#wrapper { 
    margin: 0 auto; 
    width: 940px; 
    height: 500px; 
    padding: 0; 
    border: 1px solid #000; 
} 

#online { 
    float: left; 
    width: 188px; 
    height: 480px; 
    padding: 10px; 
    border-right: 1px solid #000; 
} 

#body { 
    float: left; 
    width: 711px; 
    height: 419px; 
    padding: 10px; 
    border-bottom: 1px solid #000; 
} 

#input { 
    float: left; 
    height: 60px; 
    width: 731px; 
} 

.clear { 
    clear: both; 
} 

h1.title { 
    text-align: center; 
} 

input#message { 
    float: left; 
    margin: 0; 
    width: 640px; 
    height: 58px; 
    border: none; 
    font-size: 28px; 
    padding-left: 10px; 
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3); 
} 

input#message:focus { 
    border: none; 
    outline: none; 
    box-shadow: inset 1px 1px 3px #55ba57, inset -1px -1px 3px #55ba57; 
} 

input#send { 
    float: left; 
    background: #55ba57; 
    color: #fff; 
    border: none; 
    height: 60px; 
    margin: 0; 
    width: 81px; 
    border-left: 1px solid #000; 
} 

input#send:hover { 
    background: #489949; 
    cursor: pointer; 
} 

input#send:active { 
    background: #1e7520; 
} 

답변

2

당신은 이름을 변경하고 내가 그 생각 약간의 혼란을 낳는다. 클라이언트 측에서는 server라는 변수를 설정하고 있지만 socket.emit()을 호출하고 있습니다. 이 오류를 추적하는 데 도움이되는 오류 메시지가 브라우저 콘솔에 있었어야합니다.

+0

그게 문제였습니다. 나는 지금 조금 바보 같지만 당신이 살고 배울 것 같아요. 도와 줘서 고마워! 나는 충분한 답변을 얻 자마자이 답변을 upvote 할 것입니다. 지금은 도움이된다는 피드백을 드리겠습니다. – razorbeard

관련 문제