저는 여기에 걸려 들었고 도움이 될 것입니다. 저는 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;
}
그게 문제였습니다. 나는 지금 조금 바보 같지만 당신이 살고 배울 것 같아요. 도와 줘서 고마워! 나는 충분한 답변을 얻 자마자이 답변을 upvote 할 것입니다. 지금은 도움이된다는 피드백을 드리겠습니다. – razorbeard