CODEWITHSUNDEEP
angularjsnode.jssockets
Curious86
Curious86

Reputation: 59

Node and Angular socket error in browser console

I am using Node(server) + Angular(client) to implement socket in my application.

Angular bower.json socket components : "angular-socket-io": "^0.7.0","socket.io-client": "^1.7.2",

Node js socket component in package.json : "socket.io": "^1.7.3",

I am seeing this below web socket error in my chrome browser console :

WebSocket connection to 'wss://ireporter.apple.com/uitracker/socket.io/?EIO=3&transport=websocket&sid=4qBY-qoxEzUQZOvUAACb' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET WrappedWebSocket @ VM43:161

This error happens probably only in a production environment. Cannot remember seeing this error in when running the application in local.

Also posting ONLY the socket related code from both server and client side :

Node js server-side code

start.js file

var express = require('express');
var configure = require("./config/configure");
var logger = require("./config/components/logger")
var app = express();
var server = require('http').Server(app);
server.listen(process.env.PORT || config.port, function() {
    logger.info("Express server listening on port", config.port );
});
//Configure with all the basic middlewares and configs
configure(app,server);

configure.js file

var socket = require('./middleware/socket/socket.js');
module.exports = function (app,server) {
    app.use(socket(server));
}

socket.js file

"use strict";

var logger = require("../../components/logger");

module.exports = function(server){
    var io = require('socket.io')(server, {path: '/appname/socket.io'});
    require('./socketServer.js')(io, logger);

    return function (req, res, next) {
        req.io = io;
        next();
    };
};

socketServer.js

//export function for listening to the socket
module.exports = function(io, logger) {
    io.on('connection', function(socket) {
        socket.on('notification:update', function(data) {
            io.emit('notification:update', data);
        });
    });
};

Angular js Client Side code :

Socket.js

MyApp.factory('Socket', function ($rootScope) {
    var socket = io.connect('' , {path: '/appname/socket.io'});
    return {
        on: function (eventName, callback) {
            socket.on(eventName, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function (eventName, data, callback) {
            socket.emit(eventName, data, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            })
        }
    };
});

notificationController.js

Socket.on('notification:update', function(data) {
});

-- Could anyone suggest how to resolve the console error?

Upvotes: 0

Views: 1695

Answers (1)

Le Dinh Dam
Le Dinh Dam

Reputation: 122

Turns out there was another reverse proxy in front of your server that I had no control of. Please check your server setings. the problem is not about the code.

Error during WebSocket handshake: net::ERR_CONNECTION_RESET

Also try this one to test your server side.

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.js"></script>
<script>
    /*var socket = io('', {
        path: '/appname/socket.io'
    });*/
     var socket = io.connect('' , {path: '/appname/socket.io'});

    socket.on('notification:update', function (message) {
        console.log('notification:update ', message);
    });

    setTimeout(function() {
      console.log('emit demo');
      socket.emit('notification:update', 'DEMO');
    }, 1000);

    socket.on('connect', function (data) {
      console.log('connection');
    });
</script>

Upvotes: 1

Related Questions