I'm running on Windows and using WAMP for a localhost server. I've searched alot for tutorials, tried many things etc. but still nothing works..
Current Setup
So write now, in my www/ directory, I created a folder called socketiodemo.
In it, I did npm install socket.io as well as installing a few other node packages:
- socket.io
- express
- nib
- stylus
I installed all the above packages even though I don't actually need them. I just installed them since a lot of tutorials needed them but I'd rather not use them and just get to pure socket.io with javascript.
So, here's a snapshot of my directory under www:
- app.js
- index.html
- node_modules
- socket.io
- express
- nib
- stylus
One of the most stripped down tutorials I found gave me this app.js code, which is the server side:
// Require HTTP module (to start server) and Socket.IO
var http = require('http'), io = require('socket.io');
// Start the server at port 8080
var server = http.createServer(function(req, res){
// Send HTML headers and message
res.writeHead(200,{ 'Content-Type': 'text/html' });
res.end('<h1>Hello Socket Lover!</h1>');
});
server.listen(8080);
// Create a Socket.IO instance, passing it our server
var socket = io.listen(server);
// Add a connect listener
socket.sockets.on('connection', function(client){
// Create periodical which ends a message to the client every 5 seconds
var interval = setInterval(function() {
client.send('This is a message from the server! ' + new Date().getTime());
},5000);
// Success! Now listen to messages to be received
client.on('message',function(event){
console.log('Received message from client!',event);
});
client.on('disconnect',function(){
clearInterval(interval);
console.log('Server has disconnected');
});
});
And the following index.html for the client code:
<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0; padding:0; font-size:11px; font-family:arial; color:#444; }
body { padding:20px; }
#message-list { list-style-type:none; width:300px; height:300px; overflow:auto; border:1px solid #999; padding:20px; }
#message-list li { border-bottom:1px solid #ccc; padding-bottom:2px; margin-bottom:5px; }
code { font-family:courier; background:#eee; padding:2px 4px; }
</style>
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
// Create SocketIO instance
var socket = new io.Socket('localhost',{
port: 8080
});
socket.connect();
// Add a connect listener
socket.on('connect',function() {
log('<span style="color:green;">Client has connected to the server!</span>');
});
// Add a connect listener
socket.on('message',function(data) {
log('Received a message from the server: ' + data);
});
// Add a disconnect listener
socket.on('disconnect',function() {
log('<span style="color:red;">The client has disconnected!</span>');
});
// Sends a message to the server via sockets
function sendMessageToServer(message) {
socket.send(message);
log('<span style="color:#888">Sending "' + message + '" to the server!</span>');
}
// Outputs to console and list
function log(message) {
var li = document.createElement('li');
li.innerHTML = message;
document.getElementById('message-list').appendChild(li);
}
</script>
</head>
<body>
<p>Messages will appear below (and in the console).</p><br />
<ul id="message-list"></ul>
<ul style="margin:20px 0 0 20px;">
<li>Type <code>socket.disconnect()</code> to disconnect</li>
<li>Type <code>socket.connect()</code> to reconnect</li>
<li>Type <code>sendMessageToServer('Your Message')</code> to send a message to the server</li>
</ul>
</body>
</html>
The client code is designed to work by dynamically calling sendMessageToServer('Your Message') in chrome's inspector.
Current output
So, time to run the server. WAMP is online, and going to www/socketiodemo and doing
node app.js
Gives me the output:
info - socket.io started
Now, going to localhost/socketiodemo, the following logs are shown repeatedly:
XMLHttpRequest cannot load http://localhost:8080/socket.io/xhr-polling//1338578840544. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load http://localhost:8080/socket.io/xhr-polling//1338578850545. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
And now the server (node app.js) starts displaying the following messages:
info - socket.io started
warn - unknown transport: "undefined"
info - unhandled socket.io url
warn - unknown transport: "undefined"
info - unhandled socket.io url
warn - unknown transport: "undefined"
Also, in the client, doing sendMessageToServer('Hello'); simply appends to the ul:
Sending "hello" to the server! but doesn't actually do anything to the server. The server just conterminously dumps the infos and warns above. The client is also conterminously doing the XMLHttpRequest errors shown above.
Could you identify where the problem is? I've actually tried so many tutorials and stuff and this is the closest I've got to getting something working.
If anyone also wants to suggest a tutorial that they know would work, please do so.
