Menu
So I finally decided to give Node.js a shot. I decided to go with a small chat app to break the ice. The tutorial I am following is directly from the socket.io site.
http://socket.io/get-started/chat/
I am following the tutorial word for word and have even tried to copy and paste the code into the source and am getting no where when I type in text and send it. It is supposed to be coming up in my command prompt, however it is not.
I had the user connected and user disconnected messages appear but I am stumped on this one as I have followed the tutorial step by step.
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:
<!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>
I am assuming I fouled up some where but am not seeing it, even though I did try and copy and paste it. Also, if it matters I am using Windows 8.1 and Chrome. I checked around and could find no answer to this problem as well. Any help would be great.
EDIT: The problem was with jQuery, for some reason it is not responding as it should. After rewriting the script in vanilla it works as intended.
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>
816
This is an organization based application. In this app, I have to implement chat functionality. So as we all know Socket.io is the best solution for instant messaging app and its reliability.
js) and the Socket.IO client (browser, Node. js, or another programming language) is established with a WebSocket connection whenever possible, and will use HTTP long-polling as fallback.
On the first item, there is no coded limit to how many event handlers a socket.io server can handle. A socket derives from an EventEmitter and it uses the EventEmitter's listener capabilities to allow someone to listen for events.
Although Socket.IO indeed uses WebSocket for transport when possible, it adds additional metadata to each packet. That is why a WebSocket client will not be able to successfully connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a plain WebSocket server either.
You can activate logging for Socket.IO in Chrome by typing in your console :
localStorage.debug = "socket.io-client:socket"
and on the server side :
DEBUG=* node yourfile.js
Also, you want the script to be executed when the document is ready, in order to use jQuery so you need to delay it a bit :
$( document ).ready(function() {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
A little after the fact, but I had the same issue and tied it back to a load order issue. Just move the code that is binding to the form to the bottom of <body> rather than in <head>. It's a little misleading as some of the earlier code in the tutorial was directly in <head>.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
