Тёмный

12.2: Using Express with Node - WebSockets and p5.js Tutorial 

The Coding Train
Подписаться 1,7 млн
Просмотров 81 тыс.
50% 1

Опубликовано:

 

2 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 105   
@anniedo5527
@anniedo5527 5 лет назад
Going to my first software developer job interview thanks to you and all your tutorials! Thank you so much, you changed my life.
@TheCodingTrain
@TheCodingTrain 5 лет назад
Wow, I am so glad to hear!
@anniedo5527
@anniedo5527 5 лет назад
@@TheCodingTrain I GOT THE JOB! Will start tomorrow. THANK YOU THANK YOU SO MUCH for all the wonderful videos. You're not helping just me but everyone that wants to learn!
@dv4346
@dv4346 4 года назад
@@anniedo5527 Wow congrats Annie! How is the job going now one year into it?
@omarelijah9754
@omarelijah9754 3 года назад
I guess I'm kinda randomly asking but do anyone know a good place to stream newly released movies online ?
@rowanelliott7586
@rowanelliott7586 3 года назад
@Omar Elijah Flixportal
@kirtishukla4870
@kirtishukla4870 4 года назад
Please please please😫🙏🙏💓😫🙏🙏💓😫🙏🙏💓😫🙏🙏💓😫🙏🙏💓😫🙏🙏💓😫🙏🙏💓 make a video on a simple Minecraft game in p5.js. Please respond also 😫🙏🙏💓
@thechaoslp2047
@thechaoslp2047 4 года назад
what do you mean by simple Minecraft game
@МарјанЧавдаров
@МарјанЧавдаров 6 лет назад
5:14 In my case the program is creating a package-lock.json file which look quite different from you example
@SogMosee
@SogMosee 7 лет назад
I only watch you in 2x speed. It is the only persona I know you as.
@dAtramt
@dAtramt 7 лет назад
lol i do too, and yeah, because of that I know him as a very frenetic person haha
@jonathanchow3401
@jonathanchow3401 5 лет назад
omg I am gonna do that from now on lolz he is so much more fun now!!!!
@techdedicated
@techdedicated 4 года назад
he isnt in 2x on normal? lol
@ExodusIV
@ExodusIV 5 лет назад
For those that are not able to get the ellipse at 10:40 try editing your index.html file by replacing the script lines (not the one with sketch.js but the other ones) to include "libraries/" at the front of the js file in the src attribute. i.e. change to repeat with the other lines.
@meatball7701
@meatball7701 4 года назад
Thanks dude, helped a brother out today.
@houwinnie400
@houwinnie400 4 года назад
Thank you so much! This saved my day :')
@deadrat2003
@deadrat2003 4 года назад
it didn't work with circle(), but worked with ellipse
@paul.eee47
@paul.eee47 2 года назад
Thank you!! :D
@oraqlle
@oraqlle 4 года назад
my p5 example project didn’t come with a library folder, any ideas how to get it?
@kevintlu
@kevintlu 5 лет назад
When i did this on mac, i used npm install --save express because your command gave me an error. Great stuff!
@luisarandas
@luisarandas 5 лет назад
Thank you Daniel!
@irinamitrea6013
@irinamitrea6013 8 лет назад
learned a lot, laughed a lot! thank you!
@stijnpaauw948
@stijnpaauw948 3 года назад
Thanks for the awesome tutorials! At 10:40 my localhost page stays blank. Anyone knows how to fix?
@goldthumb
@goldthumb Год назад
My head is spinning with those amazing 4 lines of server code. "express" is a function name so we have express(), but what it function name dot then, express.static(..)? I guess the 4 strings of "express" mean 3 different things. The last one, or even the 2nd one which is quoted, might be the module name.
@dv4346
@dv4346 4 года назад
awesome Daniel Shiffman! For beginners try using Glitch, it has Node apps with Express instantly up and running :)) a lot easier to use!
@adsoyad2607
@adsoyad2607 4 года назад
*I'VE FINALLY FIGURED OUT HOW TO DO THIS FOR WINDOWS CMD* I hope this works for you as well: I'm assuming you're already in your project directory Instead of "--save" try "-g" at the end, so you type "npm install socket.io -g" (or "npm install express -g" for express) I do not fully understand, but apparently windows does not like "--save" Also when you install socket.io or express, run the command "npm list" to see all the installed dependencies or "npm list socket.io"/"npm list express" to see the specific dependency Now, if all went well you see a message like this: " `-- socket.io@2.3.0", in yellow text But if you see " `-- (empty)" or some sort of error, you type another command: "npm install -g". This was the command that worked for me. From what I understood this automatically installs all dependencies (again?). After this try the list command again and hopefully it works for you too. ALSO: The install commands did not automatically added the dependencies to the package.json file for me so if it that's the case for you too, add this yourself: "dependencies": { "express": "^4.17.1", "socket.io": "^2.3.0" } (you may have to change the version numbers) I'm also posting this comment under the next video so everyone can see this Hope it helps!
@MatthewOliverJamesOrgan
@MatthewOliverJamesOrgan 4 года назад
You make coding fun. I've learned so much today going through your videos
@karimk8551
@karimk8551 5 лет назад
so I got stuck because I couldnt get javascript to draw stuff when I opened the html page through localhost:3000 (using server.js and express) I later realized all the p5 files (p5.js, p5.min.js etc...) also need to be in the public folder, along with the sketch file, for it to actually draw stuff
@zinsy23
@zinsy23 5 лет назад
OMG thanks! I've been struggling with this for hours as well and now it works!
@tarunmugunthan5112
@tarunmugunthan5112 5 лет назад
The file structure is something like this for me... Project folder > Public - having p5 files > directory having sketch files. This is the only way my p5 sketch runs when loaded. The sketch does not run when the sketch files are in the same directory as the p5 files... They have to be in the parent directory and then the sketch files in a directory inside that.
@normajeanchariot
@normajeanchariot 4 года назад
where do you get those files?
@Anton-wc7lb
@Anton-wc7lb 4 года назад
what p5 files?
@Xy-gx8ou
@Xy-gx8ou 5 лет назад
This is so easy to follow and yet so interesting and entertaining! Thank you so much for those great videos!
@bobsmithy3103
@bobsmithy3103 7 лет назад
;_; so happy this works, tech almost always fails me.
@Daniel-sz2lq
@Daniel-sz2lq 7 лет назад
I listen on port 3000, Not much has changed but they live underwater, And your great, great, great grand daughter is doing fineeeee
@hfe1833
@hfe1833 6 лет назад
oh men, i finally i made my first webpage with p5.js hosted by node.js. thank u sir. if you were my professor in college it will not be boring and dull.enjoy ur video
@brenttrenholme7609
@brenttrenholme7609 6 лет назад
App everyone knows the best abbreviation for application is lication, it just sounds more natural
@unknown-bx8my
@unknown-bx8my 3 года назад
Why i can't understand anything😢 Help me.
@mrMathTeacher71
@mrMathTeacher71 7 лет назад
can I get you to come to Trinidad to deliver training. What is your fee?
@samsnowball
@samsnowball 7 лет назад
For anyone not using P5.js At 10:40 my javascript file doesnt directly run like his does, i have to go localhost:3000/myJsFile.js but yea - it serves it
@ArnoldsGaming
@ArnoldsGaming 7 лет назад
Linking to the js file should just show the js source code. I think you meant the html file, which I had to do. The reason for this I realized is that if the file is not called index.html, then it must be explicitly given after "localhost:3000".
@yerramillirohith5720
@yerramillirohith5720 7 лет назад
man ... how can u be so awesome ..
@jayordanisa1854
@jayordanisa1854 7 лет назад
hi can you teach us how to make a sub domain in node express or cors? i cant understand how these stuffs works.
@soisauce364
@soisauce364 3 года назад
how do i upload it and work it with any computer?please
@IceMetalPunk
@IceMetalPunk 5 лет назад
Only an Apple user would replace "it downloads and installs the package" with "magic, magic, magic, blah, blah, blah, boring" :P
@ssanand3
@ssanand3 7 лет назад
Please help. Tried this code. Doesn't serve anything. but the error message in firefox says localhost:3000/server.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). any help .. thanks !!
@TheTryek
@TheTryek 5 лет назад
If I use require() in my p5 sketch.js file in the public folder I get an error message in the console saying require is not defined. Is there a way to use require() inside the sketch.js file?
@andydedu5884
@andydedu5884 4 года назад
I was taught to learn css before bootsrap and javascript before jQuery. Does the same logic hold for Node and Express?
@enivaldobonelli
@enivaldobonelli 4 года назад
Thank you Daniel. Working fine: I saved a model.json but then could not load it in the browser. Running well from localhost... The code can recognize my daughter and my wife by now. will improve including myself and the cats.
@ahmmadawshaf
@ahmmadawshaf 3 года назад
SIDE NOTE: You dont require to write '--save' anymore. Instead you can type 'npm install express'
@GHOSToXmasPast
@GHOSToXmasPast 6 лет назад
Dude you rock !!
@sigmareaver680
@sigmareaver680 6 лет назад
Could you take a look at blessed server (node.js) over web sockets to xterm.js client (browser)? I can't seem to get it to work.
@mamupelu565
@mamupelu565 4 года назад
the "express" variable that is also a function really bugged me
@danielm9595
@danielm9595 7 лет назад
Hi nice videos, qq, wich program do i need to create websites in node,js and have some xgnix to develop
@dashl5069
@dashl5069 7 лет назад
but how do i make it so that my server is live on the internet
@returnZeroo
@returnZeroo 6 лет назад
You need a node server like digitalocean
@IceMetalPunk
@IceMetalPunk 5 лет назад
Or Heroku is a common (and free) Node host, too. You could also just run the server on your own computer and give out your IP address, and then anyone can connect to it that way. Or get a domain name and point it to your IP address, then anyone can just use the domain. Basically, as long as the server application is running, it *is* live on the internet; you just have to let people know the address of the computer the server is on :)
@aaryandhakal4691
@aaryandhakal4691 5 лет назад
@@IceMetalPunk Excuse me but can u elaborate more on how i can get my node.js app to the internet if i already have a domain name ...like how do i upload my app to the domain ?
@quillbertq.6242
@quillbertq.6242 5 лет назад
@@aaryandhakal4691 You should just need to add an A record with your IP and the port number, and it should work, as long as the node app is running. (You may have to port forward)
@cornelmihaescu7831
@cornelmihaescu7831 4 года назад
at 10:40 i get a 404 Not Found
@normajeanchariot
@normajeanchariot 4 года назад
it works but then when I update my script.js file it won't update in the browser. Even if I ctrl C in the command line and then node server.js in command line and then refresh browser
@normajeanchariot
@normajeanchariot 4 года назад
when I cut and paste the html , css and js files etc into the 'public' folder, I didn't close those files from my text editor. Basically the files in the old directory weren't deleted - I had actually just created copies of them. So when I was editing my html and js files in my text editor, I was actually editing the old versions in the old directory. I closed them and then opened the files that were in the new directory. Now I can change my js file etc and the changes are reflected when I refresh my browser.
@jsnelson_
@jsnelson_ 6 лет назад
Does anyone know why I am getting the "Cannot GET /" error on localhost:3000 but my sketch is showing locally if i bring it up and open it as regular URL(saving the html file and then double clicking it)? I have tried using multiple ports as well
@jsnelson_
@jsnelson_ 6 лет назад
I used localhost:3000/sketch.html and it seems to work, not sure if it actually serves or not...
@joshmckenna1825
@joshmckenna1825 6 лет назад
having same issue
@omrishooshan9784
@omrishooshan9784 4 года назад
he is funny... like a crazy genius professor
@soisauce364
@soisauce364 4 года назад
it is not working 😥😥
@elijahmock
@elijahmock 4 года назад
I love this guys background
@nikoarsenasvhili1543
@nikoarsenasvhili1543 4 года назад
where from can i install that libraries you use?
@geoffwagner4935
@geoffwagner4935 Год назад
wow, this is like everything anyone could ever want in life in 5 lines xD actually it's the other video that needs a reference to this one, this is much more clear about the setup being of the actual sketch folder. the other lead me onto i was setting up the computer and node more locally to be an ongoing one time thing thing like adding drivers to windows, not running the setup and adding express sketch and tailoring up each server sketch. i was apparently just running gobbley goo thru node that had nothing that meant anything, now will be going back to where i just left off on that one now that they both work lol very cool
@darkfafi
@darkfafi 7 лет назад
Can I find an example of those '11 or 12 lines of code' which Express replaces? I would love to dig deeper into how it works. Thank you.
@sirstotes
@sirstotes 7 лет назад
You could look into some tutorials by Academind.
@syan224
@syan224 8 лет назад
what will i do next with localhost when i want to upload this folder ?
@otard7742
@otard7742 6 лет назад
npm is not actually an acronym. npm stands for npm.
@elzbietakowalska8313
@elzbietakowalska8313 8 лет назад
I have a problem with finding 'express', while using cmd on Windows. I have used all the instructions from expressjs.com/en/starter/installing.html and I have already installed node.js (it works). In server.js file there is a problem with uploading 'express' too. Do you know, why I sth like that happens?
@TheCodingTrain
@TheCodingTrain 8 лет назад
sorry not sure about windows. did you try npm install express --save ?
@stephanmaya
@stephanmaya 7 лет назад
Did you run cmd as Administrator? If you don't run it as Administrator, then you will be denied access to any system files and folders.
@maxtaylor3531
@maxtaylor3531 7 лет назад
Same goes for Mac OS, appending sudo will resolve the issue.
@francodinapoli55
@francodinapoli55 5 лет назад
Anyone know where's the 10:56 video?
@satyamgaba2409
@satyamgaba2409 6 лет назад
At 10:40, I am not able to see ellipse, just a blank page is coming. PLEASE HELP
@TheCodingTrain
@TheCodingTrain 6 лет назад
Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.
@satyamgaba2409
@satyamgaba2409 6 лет назад
discourse.processing.org/t/facing-error-failed-to-load-resource-the-server-responded-with-a-status-of-404-not-found-in-web-browse-console/2433
@protagonist_.
@protagonist_. 3 года назад
People with problems: Try port 8080
@pkyadav17
@pkyadav17 7 лет назад
Too much gesture , smh!
@sachop2
@sachop2 7 лет назад
your videos are the best
@valentinsarmagal
@valentinsarmagal 7 лет назад
how do i create the index and the libraries?
@TheCodingTrain
@TheCodingTrain 7 лет назад
If you grab the full download from p5js.org look for the "empty-project" folder for a sample.
@valentinsarmagal
@valentinsarmagal 7 лет назад
man you're too cool, i'm doing an MBA in stern, whenever you feel like going for a coffee let me know, it's on me
@sergiogranadamoreno
@sergiogranadamoreno 7 лет назад
excellent as always
@jamesb9120
@jamesb9120 5 лет назад
This does not work with Windows
@killox3371
@killox3371 5 лет назад
go to discourse.processing.org
@brenttrenholme7609
@brenttrenholme7609 6 лет назад
It won't download the express to my package
@lucase6077
@lucase6077 5 лет назад
Did you find a solution?
@gabrielvian744
@gabrielvian744 7 лет назад
When I add the code to sketch.js to show the canvas, going on localhost:3000 I can see only a blank page... Why?
@alexiohearn8744
@alexiohearn8744 7 лет назад
He's using p5.js p5js.org/get-started/ If you include the CDN in your index.html, it should work.
@Anton-wc7lb
@Anton-wc7lb 4 года назад
@@alexiohearn8744 What's a CDN?
@PeterKwanvt80
@PeterKwanvt80 8 лет назад
I tried this on Windows and on Mac and both said port 3000 was already in use. Moving to port 3010 got me around this.
@TheCodingTrain
@TheCodingTrain 8 лет назад
+Peter Kwan hmmm, strange, thanks for letting me know!
@eduardolacerda8818
@eduardolacerda8818 8 лет назад
It gave me the same error. The port is probably in use. You can use another port like 8000 for example.
@tonypajerowski9390
@tonypajerowski9390 8 лет назад
I got the same error. I think what we all have in common is we are running the p5 app, which uses port 3000
@jozepff
@jozepff 7 лет назад
bla bla bla magic magic xD
@thomasbouasli6102
@thomasbouasli6102 4 года назад
Muahaha i saw the secret code! I will hack NASA!
Далее
Node.js Ultimate Beginner’s Guide in 7 Easy Steps
16:20
БАГ ЕЩЕ РАБОТАЕТ?
00:26
Просмотров 107 тыс.
Node.js is a serious thing now… (2023)
8:18
Просмотров 651 тыс.
Coding Challenge 180: Falling Sand
23:00
Просмотров 943 тыс.
Coding Challenge 166: ASCII Text Images
22:42
Просмотров 1,1 млн
Don't Use Websockets (Until You Try This…)
6:46
Просмотров 305 тыс.
The Only Database Abstraction You Need | Prime Reacts
21:42
This Is Why Python Data Classes Are Awesome
22:19
Просмотров 807 тыс.