Screencast Build an Image Streaming App With Node.js JavaScript

  • Gregg Pollack
  • 13563 views

Comments

  1. Xenos54 said

    Excellent! Great work, thanks!!

  2. arturmuller said

    Fun to watch! Great job!

  3. Robert Talamantez said

    so - to subscribe to the badge feed in 'webserver/app.js', do we just replace (socket.connect(8001); with socket.connect('http://node-soup.herokuapp.com'); ?

  4. bmills said

    this is great!

  5. garboy said

    Excellent cast, learn a lot. If it could say more about all these roles of 3000, 8000, 8001 servers, what are the roles for these, it will be more clear.

  6. Amr Tamimi said

    Maybe the best screencast I've watched! Great job!

  7. Faculty

    Carlos Souza said

    Robert, yes! I've pushed a fix to the server application that now allows people to connect to the WebSocket server from anywhere. Notice you will also need to specify the port for the socket connection, in case you are running you client in a port other than 80. Here's an example:

    https://github.com/codeschool/badges-socket-client/blob/master/public/client.js

    I've added a link to this repository on the resources section for this video. Thanks!

  8. Javier Blanco Gutiérrez said

    Amazing Soup to Bits, keep it up!

  9. Kleber Correia said

    GREAT!

  10. Stuligan said

    I got stuck at around 40 min. I keep getting a TypeError when doing:

    curl -X POST http://localhost:8000 -H "content-type: application/json" -d '[{"badge_id":"foo bar badge"}]'

    anyone know a solution?

  11. Faculty

    Carlos Souza said

    Hey Stuligan, it's hard to tell what the error might be. Let's move this conversation to http://discuss.codeschool.io/ and we'll help you figure it out.

  12. rniggebrugge said

    Very cool to see someone so experienced at work! Plus the two of you made it very accessible and fun to watch. Thanks!

  13. Orvil Juarez said

    Wow!!! Amazing!!!

  14. Petar Dudas said

    Watched the video a few days ago and I learned a lot!

  15. Andrew Conti said

    Awesome job!

  16. Boris said

    Hi ! Very nice screencast, very clear explanations and very simple way to structure the code.

    One question though, we ear a lot about promises lately, why didn't you use them instead of all these callbacks ? Or perhaps am I totally out of topics and promises can not be use in this context ?

    Thank you.

  17. sanya said

    Hey lads, looks like your example isn't working - I've got a bage several mins ago, and still cannot see it on http://node-soup.herokuapp.com/ . Actually that instance is not looks like working one, is it still aimed to an emulator?

  18. Faculty

    Carlos Souza said

    Hey Sanya, thanks for the heads up! Something might have happened during a recent server migration. I'll take a look and let you know.

  19. CodeMunki9 said

    Can you explain how you got that http tool through pip?

  20. CodeMunki9 said

    I got the following error at 40 minutes:

    curl: (52) Empty reply from server

  21. Tom Gillard said

    Great video. Excellent to actually see how someone implements this stuff in the real world in terms of abstraction. So many demos/tutorials just dump everything in one js file.

    Also really informative in terms of middleware and using a data source.

    Towards the end Gregg & TJ touch on testing node apps. It would be great if Codeschool could work on a testing course for the javascript path (much like ruby).

    I'm excited to get stuck into playing around with node and express. Great job!!

  22. Tom Gillard said

    Great video. Excellent to actually see how someone implements this stuff in the real world in terms of abstraction. So many demos/tutorials just dump everything in one js file.

    Also really informative in terms of middleware and using a data source.

    Towards the end Gregg & TJ touch on testing node apps. It would be great if Codeschool could work on a testing course for the javascript path (much like ruby).

    I'm excited to get stuck into playing around with node and express. Great job!!

  23. Seph said

    Care to post your vim configuration? Digging the look of it and would like to get my setup more like it. Thanks!

  24. Seph said

    Care to post your vim configuration? Digging the look of it and would like to get my setup more like it. Thanks!

  25. monami said

    Wow. This is great :) Informative, comprehensive, easy to understand and not boring - and all in one. I did not know this is possible :) Thanks!

  26. monami said

    +1 for asking about tests ;)

  27. Dirk-Jan de Groot said

    This is very high quality work. Any chance letting do TJ Krusinski do a workshop on Mocha Testing Framework?

  28. TJ Krusinski said

    Seph, here is a link to my dotfiles, I'm not super organized with them be warned. https://github.com/TJkrusinski/dotfiles

  29. afinnarn said

    Great cast, I learned a lot and was able to build it as I watched, which is always rewarding! Since you are only using jQuery to manipulate the DOM, maybe it's a good idea to remove jQuery as a dependency. I accomplished the same result without jQuery in about the same lines...

    window.addEventListener('load', function() { var socket = io.connect();

    socket.on('badge', function(badge){ badgeWrapper = document.getElementsByClassName('badge-wrapper'); badgeWrapper[0].insertAdjacentHTML( 'afterbegin', '' ); }); });

    Maybe 2015 is the year jQuery can be finally left behind for most apps? All credit goes to this guy http://blog.garstasio.com/you-dont-need-jquery/ .

  30. Michael Erwin said

    Somewhat of a newbie with node/express, but when I use app.post as shown in 13:10 of the video, the page renders error of 'cannot GET /' - when I change app.post to app.get, it works. What's going on?

  31. smarsh25 said

    Very good video, I found it informative. Learned a lot. I will say some topics are a bit more involved, and covered quickly, but you can follow along / absorb the material. I found viewing the Express Building Blocks Soup to bits video prior to this one very helpful. Thanks for creating these though, overall very helpful.

  32. mikeyferg said

    I had the same issue as @Michael Erwin- "Somewhat of a newbie with node/express, but when I use app.post as shown in 13:10 of the video, the page renders error of 'cannot GET /' - when I change app.post to app.get, it works. What's going on?"

  33. drjorgepolanco said

    This guy is REALLY good, he was either reading the speech or this guy codes node as good as Barack Obama talks in public...

  34. drjorgepolanco said

    soupToTest v1.0 by TJ K, sounds like a good idea for a best seller...

  35. BrightNail said

    Except this guys node.js code actually isn't filled with hot air!

  36. Fareez Ahmed said

    why aren't you using mongo? hope you guys will also offer courses on mongodb

  37. ziemekwolski said

    This was an excellent screencast! Really fun to watch. It's crazy that TJ could write so much code and run it perfectly.

  38. achergik said

    Data array in the producer is wrong on the github. Here is how you can get the correct one from you www.codeschool.com dashboard: badges = JSON.stringify($.map($('.badge-img'), function(badge, i){var badgeSrc = badge.src, badgeId = i; return {badge_id: badgeSrc}}), null, 2)

  39. achergik said

    Also if you wish to see only 10 badges at a time on the screen and never more: 5 socket.on('badge', function(badge){ 6 var $img = $(''); 7 var $badges = $('.badge-wrapper > img'); 8 if ($badges.length === 10) {
    9 $badges.get(-1).remove(); 10 } 11 $('.badge-wrapper').prepend($img); 12 setTimeout(function(){ 13 $img.addClass("on"); 14 }, 0); 15 });

  40. achergik said

    Oh sorry about formatting (

  41. achergik said

    In the Express-4 the middleware model works as in rails (i.e. Onion Middleware Model). Much more sane than Express-3

  42. Ben said

    This was so useful, would love to see more of these. +1 for some material on unit testing in node.

  43. Daniel Gormly said

    Thanks! That was great!

  44. Noam Shvacher said

    Hi :) Excellent screencast! keep up the good work :) Only one question, where can I find this script he used?

    Thank You !

  45. nishty said

    A bummer this was written using Express 3

  46. vickenCode said

    The real bummer here is the tutorials where weak, and disjoint big time. Then we get here and Codeschool somehow thinks its a brilliant idea to use VIM where most folks use a tex editor.... #FAIL

  47. leonmak said

    noticed for web server part, axon is not used anymore. I was following along and then it didn't work at that part.

  48. Nikola Novakovic said

    Great video! :)

    I have one problem during development and that is that it says connection to heroku app was refuse :( I specified the port and everything, not sure whats going on. :/

  49. Nikola Novakovic said

    Great video! :)

    I have one problem during development and that is that it says connection to heroku app was refuse :( I specified the port and everything, not sure whats going on. :/

  50. Ryan Ovrevik said

    i cant help but wonder how many times that dude says "sweet".

  51. johnalexander said

    I don't think you mentioned install Redis onto your local machine... to be able to run redis-server. For those on Mac you can do 'brew install redis' using homebrew, if you have that setup.

  52. MANAN HORA said

    Why is my redis server is not running when I entered 'redis-server'? (I cloned this directory https://github.com/codeschool/nodejs-soup-to-bits-web-server, and entered the command from within this directory)

  53. MANAN HORA said

    installed redis. Redis server is running. When I try to run the pubsub server, I get : Cannot read property 'save' of undefined". Any ideas?

  54. Faculty

    Stefan Nychka said

    Manna, make sure you installed the redis server

    http://discuss.codeschool.io/t/real-time-web-with-node-js-level-7-redis-not-working-locally/6886

    For further help, please post at http://discuss.codeschool.io/c/screencasts/soup-to-bits (it's more public facing, so more likely to get answers).

    No worries, as if my guess doesn't help I or someone (you included :) ) should be able to help out

  55. lmdrx said

    httpie - Python CLI HTTP client; user-friendly cURL replacement featuring intuitive UI, JSON support, syntax highlighting, wget-like downloads, extensions, etc. From: https://github.com/jkbrzt/httpie or http://httpie.org

  56. thisguycoding said

    Where's the code that generates the badges...I can't find it on github

  57. Alexander Tarasov said

    Could you please explain me one thing. In the web-server repository lib/socket.js was changed. It now subscribes to redis channel - not axon. Why was it done? Is a better way?Thank you.

  58. codybousc said

    I'm getting the same TypeError that Stuligan referenced a year ago at minute 41:34. I can't find any reference to the issue on the http://discuss.codeschool.io/ site. Has anyone else had/resolved this issue?

  59. codybousc said

    I've put my code up on github if anyone cares to give it a gander! I'm not too sure how to proceed at this point. Any help would be greatly appreciated.

    https://github.com/codybousc/soup-to-bits-nodejs

  60. Walther H. Diechmann said

    very instructive - nice dialogue between the two of you! Taking this to production, however, makes me wonder what kind of metal/OS I should throw at it?

  61. Hadar Shkolnik said

    Thank you so much for this video! Any chance you can share a github link for both projects? Thank you!

  62. Philipp Klein said

    In case someone has the same error as codybousc or Stuligan (TypeError while using curl at 41:34): The request and response parameters of the save and send method need to be swapped (or better: correctly named). First comes req, then res. Don't forget the anonymous function in app.post.

  63. Philipp Klein said

    Ignore my post above. The swapped-parameters-issue was just me not paying attention to what I programmed.

  64. Victor Huang said

    It's really a great video! I learn a lot. However I have a quick question about the code below -> app.post('/', badges.save, badges.send); I know that badges.save and badges.send are both functions. But how can I just type in badges.save and badges.send instead of badges.save(req, res, next) and badges.send(req, res, next)? Is this some sort of traditions for JavaScript that I don't know? It looks familiar but I can't seem to find it in the courses I took on code school.

  65. Daniela Becerra said

    I would like to recommend a change in the UI of the screencasts, the bar that shows the controlls for play/pause, scroll, volume , etc always interfeers with me seeing the last line of the terminal, which is very important for this kind of videos, so please, if the video wasn't as tall, if I go over it and the controllers show up it wouldn't be a problem. Thank you.

  66. Pierre Roth said

    Wow! Excellent!

  67. Brett Layman said

    I'm trying to use a newer version of express, and I'm wondering what would be a good alternative to "app.use(express.json());". I'm trying to use "app.use(bodyParser.json({extended:false}));" with the body-parser package, but when I run curl with an array for the data, I get a bunch of unexpected errors in the body-parser files. Maybe I'm using the wrong syntax?

  68. Brett Layman said

    Actually, I don't think it's a problem with my parser middleware. I tried an older version of express with the middleware from your video and it still doesn't work. I get an error saying "unexpected token b" and a "couldn't resolve host "bar". I typed the curl command word for word, maybe it's syntax is different on windows?

  69. Thomas Strauß said

    Excellent session. Very impressive to see the beast in action.

  70. jesse said

    Excellent! Quick question as I likely missed something, why is the purpose of pubSub's models/"send = function() {...}" on POST?

  71. Mark Deazley said

    Thanks... Overall an excellent presentation. My head spun when he started talking about middleware... In old-speak he means "middleware is a modular set of pipeline functions invoked sequentially via the express module, a pattern that encourages code reuse"... Not 'SOA' or some other marketing abomination!

  72. brownmagik352 said

    I learned a ton!! This video is really important for going from the pieces seen in the videos to actually building an app from scratch.

  73. sudbesus said

    The overall architecture shown at the start of the video mentions that the webserver subscribes to the pub/sub server and the pub/sub server uses redis to save the badges. But in the code provided in the repo, the webserver is directly subscribing to redis instead of the pub/sub server - socket.js - line-8: redis.subscribe('badge'). This should be fixed in the repo.

  74. sudbesus said

    Its a great video demonstrating the real time streaming. I have one question regarding the architecture - Why the client browser is not directly interacting with the pub/sub server, why is the webserver required in between?

  75. sudbesus said

    Ignore my above post, later I understood that the pub/sub server only publishes, the webserver is required to subscribe to those published messages.

  76. noesberger said

    Hi

    I used the code from https://gist.github.com/TJkrusinski/10735569 to generate badges for my local installation of the pub/sub server and the webserver. The code is generating information and they are written to Redis correctly, but no badge is shown, because the path to the image is wrong: http://192.168.142.158:3000/ img src="ruby-bits-part-2-59098ceb97c12ac640eebadf6a4da58a.png" alt="Code School Badge"

    What is the correct path for the image to run all locally? (only point to images on codeschool.com). Or what does I have to change, that my local webserver and pub/hub server is working fine. I would like to have all local.

    Thanks for your help.

  77. Carlos Ortega said

    I know this video is a bit old now, but I learned alot. Great video.

  78. davamale said

    Why do you use 'exports.function()' instead of 'module.exports.function()'?

  79. davamale said

    Why do you use 'exports.function()' instead of 'module.exports.function()'?

  80. sulkytejas47 said

    when I ran the code it gave me output as done but in Redis CLI when I did Lrange it says empty set

  81. aliasmac said

    _.clone returns a shallow copy, not a deep copy.

  82. qazaqbro said

    wow

  83. umowis said

    Could somebody explain why _.clone is really need?

  84. Ivan Matavulj said

    I think you have a problem in video editing. Too often I find myself looking at the two guys waiting for the code to come back on screen so I can understand what they're talking about.

About This Screencast

This episode takes what you learned in Real-time Web with Node.js and gives you the next steps toward building an application from the ground up. Gregg Pollack and guest screencaster TJ Krusinski demonstrate how to build an application that provides a live stream of Code School badges as they are earned throughout various Code School courses.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now