HyperWeb and Socket.io

Glitch Feedback
1

Hello,

I wanted to recreate a simple app I had done before. I present the user with a canvas, they click a (big) pixel and it will flip at next turn. The twist being every user is presented the same, shared, canvas.

I tried to setup a basic socket.io app which I’ll need to share the canvas state between the users but I have some trouble following the socket.io documentation. The library need a reference to the server but hyperweb doesn’t expose it. At least, I haven’t found how to get it yet.

Any help would be welcome :slight_smile:

2

Welcome gkrnours!

I’m unfamiliar with socket.io per say. However, I do know socket.io has been used successfully by users.

The node server is exposed running at your-project.hyperweb.space. Connecting to that URL should get you through to a websocket supporting node server on the backend.

One thing to consider is that state is not stored for very long on these backend containers. If you need a level of long term persistence either keep the state in the client and the server becomes the proxy or have the server store the state when it received a signal to shutdown SIGINT.

An example of a persistent data store is here - https://bramble-leaf.hyperweb.space/ with the code here https://hyperweb.space/#!/project/bramble-leaf

Note that this is rate limited so store state on SIGINT or on periodic intervals,

I hope this helps and keep the feedback coming!

Richard

3

I was just looking for a socket library too. I’m unfamiliar with Node, so I did a bit of Googling and a lot of recommendations for the “ws” library, so I tried that. Seemed to be really simple to set up; here’s my “echo server” test, which just handles sockets to the root of the url :slight_smile:

var server = require('http').createServer(),
  WebSocketServer = require('ws').Server,
  server = require('http').createServer(),
  wss = new WebSocketServer({ server: server }),
  express = require('express'),
  app = express();

// Client stuff
app.use(express.static('public'));
app.get("/", function (request, response) {
  response.sendFile(__dirname + '/views/index.html');
});

// Server stuff
wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    ws.send(message);
  });
});

// Listen
server.on('request', app);
server.listen(process.env.PORT, function () {
  console.log('Your app is listening on port ' + server.address().port);
});
4

Thanks Richard for the tips on the datastore and SIGINT :smiley:

After a bit more of reading doc and the hello world app, I found that express’ app.listen return the server. So I managed to run socket.io :slight_smile:

Also thanks DanTup for the suggestion. I will look into it if I have more problem with socket.io

1 Like
5

Great - keep the questions, feedback coming! We want to hear what you love, and what you think about everything else too!