Socket.io message event not emitting from client to server
Question
I'm stuck in a rut here and would love some help. I'm new to Node.js, Socket.io and Express - I just started learning today, but I've made fast progress. I'm trying to build a simple little webchat application, but I've run into a problem. I have set up a form with a textbox that when submit, gets sent to the server, and the server logs the value in the console. The only problem is it is not logging it to the console.
The server and the client connect just fine (I have a console.log("Client connected...") message when a client connects), but the messages event emitter doesn't seem to work. Am I using outdated code? Invalid syntax? I've spent hours searching for an answer and haven't found one yet.
My application is divided into an app.js, index.html, and /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;
}
1 answers
solution1
2 ACCPTED 2012-11-27 02:47:59
You're changing the names and I think that's leading to some confusion. On the client side you're setting a variable called server, yet you're calling socket.emit(). There should have been some error messages in your browser console which would help you track this down.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.