New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using socket.io in the dev-server? #76

Closed
ArnoBuschmann opened this Issue Dec 1, 2014 · 10 comments

Comments

Projects
None yet
9 participants
@ArnoBuschmann

ArnoBuschmann commented Dec 1, 2014

I wanted to use socket.io in my project, so I added this to the express server.js file:

/**
 * Initialize socket.io
 */
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket){
        console.log('neue Socket-Connection');
        socket.on('event', function(data){});
        socket.on('disconnect', function(){});
});

Now when creating a production build, the socket communication between client and server works nicely as expected.

But: Unfortunately it is not working when running the Webpack dev server :(

Has anyone an idea how that could be fixed?

@jhnns

This comment has been minimized.

Member

jhnns commented Dec 1, 2014

The problem is that socket.io tries to connect to window.location.href by default. But webpack-dev-server doesn't redirect your websocket connection to your api. Basically you have two options:

  • Use the webpack-dev-middleware. It basically passes the responsibility to serve the webpack content back to your application.
  • Configure socket.io to connect to your api
@wmertens

This comment has been minimized.

wmertens commented Apr 1, 2015

@jhnns wouldn't it be a better solution to configure webpack-dev-server so it doesn't intercept /socket.io-client but instead uses e.g. /__webpack-dev? Then proxying would work normally.

@ocyedwin

This comment has been minimized.

ocyedwin commented May 5, 2015

Hi @ArnoBuschmann , did you manage to find a good solution? I'm having the same problem.

@wmertens

This comment has been minimized.

wmertens commented May 5, 2015

@ocyedwin yes, simply rename the path of your own socket. Right now the hot-loader is using /socket which captures everything starting with socket.

@ocyedwin

This comment has been minimized.

ocyedwin commented May 5, 2015

@wmertens okay, thanks!

@raineroviir

This comment has been minimized.

raineroviir commented Jul 14, 2015

I wasn't able to use socket.io + webpack-dev-server. But like @jhnns mentioned using webpack-dev-middleware in addition to https://www.npmjs.com/package/webpack-hot-middleware gives you hot-reloading without webpack-dev-server

@scottmcnab

This comment has been minimized.

scottmcnab commented Aug 8, 2015

I think this issue could be fixed if #220 was implemented? Then the hot loader could listen to a custom url path that does not conflict with the app, such as /__webpack-dev/socket.io

@wmertens

This comment has been minimized.

wmertens commented Aug 9, 2015

Yup.

On Sat, Aug 8, 2015, 18:53 scottmcnab notifications@github.com wrote:

I think this issue could be fixed if #220
#220 was
implemented? Then the hot loader could listen to a custom url path that
does not conflict with the app, such as /__webpack-dev/socket.io


Reply to this email directly or view it on GitHub
#76 (comment)
.

Wout.
(typed on mobile, excuse terseness)

@mlucool

This comment has been minimized.

mlucool commented Nov 17, 2015

I am running into the same problem, is there any better solution than rename the apps io path (which will likely leads to more problems down the road)?

@SpaceK33z

This comment has been minimized.

Member

SpaceK33z commented Nov 24, 2015

As of v0.13 (#302) socket.io is replaced with sockjs, so you would no longer have this problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment