Skip to content
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

Enable proxying of websockets #1090

Merged
merged 1 commit into from
Nov 23, 2016
Merged

Enable proxying of websockets #1090

merged 1 commit into from
Nov 23, 2016

Conversation

dceddia
Copy link
Contributor

@dceddia dceddia commented Nov 23, 2016

Added ws: true to the httpProxyMiddleware options, and also listen
for the "upgrade" event so that websockets can be proxied immediately,
rather than waiting for an initial HTTP request.

How To Test This

I modified the template App.js and added a componentDidMount that creates a websocket. It tries to connect to localhost:3000, the webpack dev server.

componentDidMount() {
  let s = new WebSocket("ws://localhost:3000/");
  s.addEventListener('message', m => console.log(m.data));
  s.addEventListener('error', m => console.log(m));
  s.addEventListener('open', m => {
    console.log(m);
    s.send("hey there!");
  });
}

Then, in packages/react-scripts/package.json, added the proxy option:

"proxy": "http://localhost:4000"

(it works with http and with ws -- no need for ws though because of the ws: true flag)

Finally, I set up a tiny Express echo server:

app.js

var app = require('express')();
var expressWs = require('express-ws')(app);

app.ws('/', function(ws, req) {
  ws.on('message', function(msg) {
    console.log(msg);
    ws.send(msg);
  });
});

app.listen(4000);

Package-wise it just needs npm install express express-ws.

In one terminal, start up the WS server: node app.js.

In another terminal, start up CRA: npm start

The browser console should show that the socket connected, and say "hey there!" The WS server terminal should also say "hey there!"

Still Works With Socket.io

I tested with socket.io as well -- that still works.

Express server: (npm install express socket.io)

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

io.on('connection', function (socket) {
  socket.on('msg', function (data) {
    console.log(data);
  });
});

server.listen(4000);

Same proxy settings.

In App.js, import socket.io:

import io from 'socket.io-client';

Connect and send a message:

componentDidMount() {
  let socket = io(`http://localhost:3000/`);
  socket.emit('msg', "hey now!");
}

Install the client:

npm install socket.io-client

Start up the server and CRA, and the server terminal should print "hey now!"

Added `ws: true` to the httpProxyMiddleware options, and also listen
for the "upgrade" event so that websockets can be proxied immediately,
rather than waiting for an initial HTTP request.
@gaearon gaearon added this to the 0.8.0 milestone Nov 23, 2016
@gaearon gaearon merged commit ce91819 into facebook:master Nov 23, 2016
@gaearon
Copy link
Contributor

gaearon commented Nov 23, 2016

LGTM. Thanks!

jarlef pushed a commit to jarlef/create-react-app that referenced this pull request Nov 28, 2016
Added `ws: true` to the httpProxyMiddleware options, and also listen
for the "upgrade" event so that websockets can be proxied immediately,
rather than waiting for an initial HTTP request.
alexdriaguine pushed a commit to alexdriaguine/create-react-app that referenced this pull request Jan 23, 2017
Added `ws: true` to the httpProxyMiddleware options, and also listen
for the "upgrade" event so that websockets can be proxied immediately,
rather than waiting for an initial HTTP request.
randycoulman pushed a commit to CodingZeal/create-react-app that referenced this pull request May 8, 2017
Added `ws: true` to the httpProxyMiddleware options, and also listen
for the "upgrade" event so that websockets can be proxied immediately,
rather than waiting for an initial HTTP request.
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants