CODEWITHSUNDEEP
node.jssocketslaravel-5
bachras
bachras

Reputation: 81

socket.io not working on client side (transport error)

I am trying to implement sockets by following the tutorial https://laracasts.com/discuss/channels/general-discussion/step-by-step-guide-to-installing-socketio-and-broadcasting-events-with-laravel-51 . I got node.js running, reddis working and port 3000 is listening. I can get console messages on command line. Problem occurs when i try to emit anything to the client side. Sever side:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var Redis = require('ioredis');
var redis = new Redis();
redis.subscribe('test-channel', function(err, count) {
});
redis.on('message', function(channel, message) {
    console.log('Message Recieved: ' + message);
    message = JSON.parse(message);
    io.emit(channel + ':' + message.event, message.data);
});
http.listen(3000, function(){
    console.log('Listening on Port 3000');
});

Client side:

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.7/socket.io.min.js"></script>
<script>
    var socket = io('http://localhost:3000');
    //var socket = io('http://192.168.10.10:3000');
    socket.on("test-channel:App\\Events\\EventName", function(message){
        console.log("Working");
        // increase the power everytime we load test route
        $('#power').text(parseInt($('#power').text()) + parseInt(message.data.power));
    });

I tried to debug via browser console using "localStorage.debug = '*';" and I receive the following message:

engine.io-client:socket socket error {"type":"TransportError","description":{}} +4ms 
socket.io-client:manager connect_error +4ms 
socket.io-client:manager reconnect attempt error +1ms 
socket.io-client:manager will wait 5000ms before reconnect attempt +0ms 
engine.io-client:socket socket close with reason: "transport error" +1ms 
engine.io-client:polling transport not open - deferring close +1ms 
socket.io-client:manager attempting reconnect +5s 
socket.io-client:manager readyState closed +1ms

I tried all the available examples, I also tried the basic example from the socket.io website and nothing works. Any help is appreciated. Thanks

After few days digging I found out that socket.io works perfectly fine on localhost but does not work from extrernal domain. I also tried to change

var socket = io('http://localhost:3000');

to

var socket = io('http://serverip:3000');

but it did not help. Chrome browser gives me error:

GET http://serverip:3000/socket.io/?EIO=3&transport=polling&t=LDrVJCA Request.create @ socket.io.min.js:1Request @ socket.io.min.js:1XHR.request @ socket.io.min.js:1XHR.doPoll @ socket.io.min.js:1Polling.poll @ socket.io.min.js:1Polling.doOpen @ socket.io.min.js:1Transport.open @ socket.io.min.js:1Socket.open @ socket.io.min.js:1Socket @ socket.io.min.js:1Socket @ socket.io.min.js:1Manager.open.Manager.connect @ socket.io.min.js:2(anonymous function) @ socket.io.min.js:3
feedTest:1 XMLHttpRequest cannot load http://serverip:3000/socket.io/?EIO=3&transport=polling&t=LDrVJCA. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access. The response had HTTP status code 502.

I would really appreciate any help. Thanks

Upvotes: 6

Views: 15492

Answers (3)

Niv Apo
Niv Apo

Reputation: 1083

For anyone still experiencing this issue after trying all the solutions in this thread, in my case the issue was with the new version of Next.js (>13.2.4) installed on my environment.

You can read more on the issue in this thread: https://github.com/vercel/next.js/issues/49334

If that's not the case for you and you still have this issue, the 3 most possible explanations for a disconnection are:

The browser tab was minimized and heartbeat has failed

The client is not compatible with the version of the server

You are trying to send a huge payload

Upvotes: 0

bachras
bachras

Reputation: 81

With help on laracasts.com I managed to solve the issue. Port 3000 was closed for publicity that's why it only worked on localhost. Thanks to alexey for trying to help.

Upvotes: 0

alexey
alexey

Reputation: 1411

This is because CORS

You can use jsonp to avoid it:

    $.ajax({
       type: "POST",
       dataType: 'jsonp',
       ...... etc ....
     })

EDIT

For socket io make this:

var socket = io('http://localhost:3000');
socket.set("origins","*");

EDIT

var socket = io('http://localhost:3000',{origins:'localhost:* http://localhost:* http://www.localhost:*'});

OR 

var socket = io('http://localhost:3000',{origins:"*"});

Upvotes: 1

Related Questions