7 ms·

Real-Time Web Analytics Dashboard with NodeJs, Socket.io, and VueJs

143 points by fadymak 11y ago

fadymak 11y ago
Edit: Heroku instance should be up now :) The Heroku instance is currently overwhelmed with all the traffic. You can download the code from the GitHub repository here: https://github.com/coligo-io/real-time-analytics-node-socketio-vuejs https://github.com/coligo-io/real-time-analytics-node-socket... and run it using: node app.js
mapcars 11y ago
What is the point in preferring Socket.io to WebSockets in 2016?
- jonesb6 11y ago
  Isn't graceful degradation (in support of older browsers) the main feature of Socket.io?
  - danellis 11y ago
    Does anyone really care about IE 9 any more, though?
    - jonesb6 11y ago
      Apparently they make up ~7% of internet users. So my guess is, yes.
    - thejosh 11y ago
      It really depends on your target audience who will be using your application. If you can block them (ie: the user needs to login), you don't need to wrory.
    - vkjv 11y ago
      It's also important to note that you don't just need browser support. You also need support in every web appliance that the request passes through. It's really common for web sockets not to work through corporate content filters and old load balancers.
    - BraveNewCurency 11y ago
      > Does anyone really care about IE 9 any more, though? Not Microsoft. It's unsupported as of 2 months ago.
- coltonv 11y ago
  i actually went through this debate a few days ago when deciding what to use for realtine updates on our new platform. I had previously used socket.io but decided I'd try just using straight websockets and not bothering backporting realtine updates to IE9. Really great decision IMO. The basic Websocket API is actually really easy to use. i got everything up and running in less than a day, the server is less than 100 lines, and the client side code is about 50 lines and completely resuable and DRY wherever i need realtime updates. Compare this to the 100kb (minified) and all sorts of boilerplate you have to write for socket.io, so in my opinion you're better off with straight WebSockets these days.
  - XCSme 11y ago
    See this: https://gist.github.com/zeusdeux/5491cff541fb4ac4c142 https://gist.github.com/zeusdeux/5491cff541fb4ac4c142 I myself prefer the extra 100kb if I receive in exchange a more robust client/server architecture with browser fallback.
    - coltonv 11y ago
      That link mentions that it's both a server and a client, which made me realize i didn't mention what i used server side. I used https://github.com/sitegui/nodejs-websocket/blob/master/README.md https://github.com/sitegui/nodejs-websocket/blob/master/READ... which is extremely easy to set up and use. i don't doubt the value of socket.io but I for my purposes it was not optimal.
  - dcwca 11y ago
    > and the client side code is about 50 lines and completely resuable and DRY Were you able to implement auto-reconnect with backoff? That's one of the most important features that something like Socket.io gives you.
    - coltonv 11y ago
      Right now just a 3 time retry with hard coded delay between each one.
    - 11y ago
- Rauchg 11y ago
  - Built in reconnection. - Events / actions as main abstraction. - Support for degradation for old devices, browsers, corporate networks. - WebSocket is not very good at multiplexing. One discrete TCP connection per socket (opposite direction of what HTTP/2 is going) - Binary support inside JSON (`Buffer` etc)
  - true_religion 11y ago
    Plus, all of this is requires support on the server end as well as the client. A lot of people look at SocketIO as a client-side only library, but it's not. It has connection implementors written on the server side to support things like multiplexing over one channel.
nailer 11y ago
If you love super fast virtual DOM but don't want all the stuff that comes with react (including the learning curve), Vue's awesome. The same site has a bunch of other Vue tutes: http://coligo.io http://coligo.io
- pdog 11y ago
  React itself is already pretty simple if you ignore all the extraneous tooling. The core API is just about a dozen lifecycle methods.
  - recursive 11y ago
    If you ignore the tooling, then you can't use JSX. If you can't use JSX, then I don't think React is that useful.
    - k__ 11y ago
      have you looked into hyperscript and the hyperscript-helpers? there are versions that work with react.
  - spriggan3 11y ago
    You can't really code in React professionally if you ignore all the tooling around it, the pipelines , the JSX, the flux/redux/... and all that stuffs. It's like saying "C is pretty simple if you ignore gcc macros,make, autoconf, automake, autogen, pkg-config, ld , and all that stuff". You cant. All these dependencies are necessary and managing them constitute at least half the amount of time spent working with C. Same thing with React. So you pretty much end up with the same level of complexity as more complicated solutions in the real world context.
    - KurtMueller 11y ago
      Haven't ignored JSX, but other than that, I use React in a professional context with the same tooling I use for jQuery.
  - 11y ago
graupel 11y ago
So - for a large site with say 25,000 average concurrents peaking at 250,000 once in a while, how much computing power on heroku or AWS would I need to run this setup?
sandra_saltlake 11y ago
the main feature of Socket.io

143 points by fadymak 11y ago

Edit: Heroku instance should be up now :) The Heroku instance is currently overwhelmed with all the traffic. You can download the code from the GitHub repository here: https://github.com/coligo-io/real-time-analytics-node-socketio-vuejs https://github.com/coligo-io/real-time-analytics-node-socket... and run it using: node app.js

mapcars 11y ago

What is the point in preferring Socket.io to WebSockets in 2016?

jonesb6 11y ago
Isn't graceful degradation (in support of older browsers) the main feature of Socket.io?
- danellis 11y ago
  Does anyone really care about IE 9 any more, though?
  - jonesb6 11y ago
    Apparently they make up ~7% of internet users. So my guess is, yes.
  - thejosh 11y ago
    It really depends on your target audience who will be using your application. If you can block them (ie: the user needs to login), you don't need to wrory.
  - vkjv 11y ago
    It's also important to note that you don't just need browser support. You also need support in every web appliance that the request passes through. It's really common for web sockets not to work through corporate content filters and old load balancers.
  - BraveNewCurency 11y ago
    > Does anyone really care about IE 9 any more, though? Not Microsoft. It's unsupported as of 2 months ago.
coltonv 11y ago
i actually went through this debate a few days ago when deciding what to use for realtine updates on our new platform. I had previously used socket.io but decided I'd try just using straight websockets and not bothering backporting realtine updates to IE9. Really great decision IMO. The basic Websocket API is actually really easy to use. i got everything up and running in less than a day, the server is less than 100 lines, and the client side code is about 50 lines and completely resuable and DRY wherever i need realtime updates. Compare this to the 100kb (minified) and all sorts of boilerplate you have to write for socket.io, so in my opinion you're better off with straight WebSockets these days.
- XCSme 11y ago
  See this: https://gist.github.com/zeusdeux/5491cff541fb4ac4c142 https://gist.github.com/zeusdeux/5491cff541fb4ac4c142 I myself prefer the extra 100kb if I receive in exchange a more robust client/server architecture with browser fallback.
  - coltonv 11y ago
    That link mentions that it's both a server and a client, which made me realize i didn't mention what i used server side. I used https://github.com/sitegui/nodejs-websocket/blob/master/README.md https://github.com/sitegui/nodejs-websocket/blob/master/READ... which is extremely easy to set up and use. i don't doubt the value of socket.io but I for my purposes it was not optimal.
- dcwca 11y ago
  > and the client side code is about 50 lines and completely resuable and DRY Were you able to implement auto-reconnect with backoff? That's one of the most important features that something like Socket.io gives you.
  - coltonv 11y ago
    Right now just a 3 time retry with hard coded delay between each one.
  - 11y ago
Rauchg 11y ago
- Built in reconnection. - Events / actions as main abstraction. - Support for degradation for old devices, browsers, corporate networks. - WebSocket is not very good at multiplexing. One discrete TCP connection per socket (opposite direction of what HTTP/2 is going) - Binary support inside JSON (`Buffer` etc)
- true_religion 11y ago
  Plus, all of this is requires support on the server end as well as the client. A lot of people look at SocketIO as a client-side only library, but it's not. It has connection implementors written on the server side to support things like multiplexing over one channel.

nailer 11y ago

If you love super fast virtual DOM but don't want all the stuff that comes with react (including the learning curve), Vue's awesome. The same site has a bunch of other Vue tutes: http://coligo.io http://coligo.io

pdog 11y ago
React itself is already pretty simple if you ignore all the extraneous tooling. The core API is just about a dozen lifecycle methods.
- recursive 11y ago
  If you ignore the tooling, then you can't use JSX. If you can't use JSX, then I don't think React is that useful.
  - k__ 11y ago
    have you looked into hyperscript and the hyperscript-helpers? there are versions that work with react.
- spriggan3 11y ago
  You can't really code in React professionally if you ignore all the tooling around it, the pipelines , the JSX, the flux/redux/... and all that stuffs. It's like saying "C is pretty simple if you ignore gcc macros,make, autoconf, automake, autogen, pkg-config, ld , and all that stuff". You cant. All these dependencies are necessary and managing them constitute at least half the amount of time spent working with C. Same thing with React. So you pretty much end up with the same level of complexity as more complicated solutions in the real world context.
  - KurtMueller 11y ago
    Haven't ignored JSX, but other than that, I use React in a professional context with the same tooling I use for jQuery.
- 11y ago

graupel 11y ago

So - for a large site with say 25,000 average concurrents peaking at 250,000 once in a while, how much computing power on heroku or AWS would I need to run this setup?

sandra_saltlake 11y ago

the main feature of Socket.io