Connecting client to server using Socket.io

Question

I'm relatively new to node.js and it's addons, so this is probably a beginnersquestion.

I'm trying to get a simple HTML page on a webserver connect to a different server running node.js with websocket.io.

My code looks like this:

Client

<script src="socket.io/socket.io.js"></script>
<script>
    // Create SocketIO instance, connect

    var socket = new io.Socket();

    socket.connect('http://127.0.0.1:8080'); 

    // Add a connect listener
    socket.on('connect',function() {
      console.log('Client has connected to the server!');
    });
    // Add a connect listener
    socket.on('message',function(data) {
      console.log('Received a message from the server!',data);
    });
    // Add a disconnect listener
    socket.on('disconnect',function() {
      console.log('The client has disconnected!');
    });

    // Sends a message to the server via sockets
    function sendMessageToServer(message) {
      socket.send(message);
    };
</script>

Serverside

// Require HTTP module (to start server) and Socket.IO
var http = require('http');
var io = require('socket.io');
var port = 8080;

// 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(port);

// Create a Socket.IO instance, passing it our server
var socket = io.listen(server);

// Add a connect listener
socket.on('connection', function(client){ 
    console.log('Connection to client established');

    // 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');
    });
});

console.log('Server running at http://127.0.0.1:' + port + '/');

Starting up the server works fine and running http://localhost:8080 in my browser also works, returning 'Hello Socket Lover' as expected. But I want to make a different page talk to the sockets, not run one from node.js.

But when I run it, nothing happens and the Chrome console returns:

Failed to load resource            http://undefined/socket.io/1/?t=1333119551736
Failed to load resource            http://undefined/socket.io/1/?t=1333119551735

I've been at this all day. Any help?

score 41 · Accepted Answer · answered Mar 30 '12 at 15:17

Have you tried loading the socket.io script not from a relative URL?

You're using:

<script src="socket.io/socket.io.js"></script>

And:

socket.connect('http://127.0.0.1:8080');

You should try:

<script src="http://localhost:8080/socket.io/socket.io.js"></script>

And:

socket.connect('http://localhost:8080');

Switch localhost:8080 with whatever fits your current setup.

Also, depending on your setup, you may have some issues communicating to the server when loading the client page from a different domain (same-origin policy). This can be overcome in different ways (outside of the scope of this answer, google/SO it).

For simplifying references you might have to several other scripts, `` can be used instead. — MarkMYoung, Oct 25 '19 at 15:08

score 14 · Answer 2 · answered Mar 31 '12 at 10:52

14

You need to make sure that you add forward slash before your link to socket.io:

<script src="/socket.io/socket.io.js"></script>

Then in the view/controller just do:

var socket = io.connect()

That should solve your problem.

answered Mar 31 '12 at 10:52

instinctious

694
3
10

I've used io.connect() and it works fine, but why i don't need to specify the address? Does it connect automatically to localhost if any address is not specified? – Mattia Surricchio Apr 10 '19 at 11:03
1

@MattiaSurricchio: If you don't provide an address it assumes it's the window's location (i.e. wherever the html file was served from), so if you are connecting to the same server that is serving your pages you can omit the address. docs: https://socket.io/docs/client-api#io-protocol – Mattia Feb 03 '20 at 19:47

score 0 · Answer 3 · edited Oct 26 '22 at 11:49

Instead of:

var socket = new io.Socket();

Try:

const socket = io();

Also add a server file:

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
app.use(express.static(__dirname + '/public'));
const io = require('socket.io')(server);
const PORT = 5000;

server.listen(PORT, () => {
console.log(`Server is Listening On Port ${PORT}`);
});

Connecting client to server using Socket.io

3 Answers3

Linked