從sfpc.io直播!
在本視頻中,我使用p5.js和WebSockets討論了如何通過客戶端-伺服器編程在多個用戶之間創建實時協作繪圖畫布。涵蓋的主題:Node.js,Express.js,Socket.io,p5.js。
再加上一個新的階段的開始:10分鐘編碼挑戰!
12:40-處理中的Starfield編碼挑戰
46:57-今天的項目介紹
51:00-如何安裝和使用Node.js
1:04:59-將Web框架Express.js添加到主機文件
1:24:29-安裝Socket.io與伺服器建立套接字連接
1:41:38-將客戶端連接到伺服器以共享繪圖畫布
1:53:10-結論
編碼挑戰源代碼:
處理:https://github.com/CodingTrain/Rainbow-Code/tree/master/challenges/CC_01_StarField
p5.js:https://github.com/CodingTrain/Rainbow-Code/tree/master/challenges/CC_01_StarField_p5.js
WebSocket / p5.js項目源代碼:https://github.com/CodingTrain/Rainbow-Code/tree/master/sockets
聯繫人:https://twitter.com/shiffman
節點:https://nodejs.org/en/
Socket.io:http://socket.io/
快遞:http://expressjs.com/
p5.js:https://p5js.org/
了解JavaScript基礎知識:
有關數據和API的更多信息:
幫助我們字幕和翻譯此視頻!
http://amara.org/v/Qbsw/
Conduct行為準則:https://github.com/CodingTrain/Code-of-Conduct。
1:29:35 For anyone else that have gotten stuck on this part due to the download link not being there, I managed to find a similar piece of code here:
https://github.com/socketio/socket.io-client
Hi
I want project to be done will you able to do
u forgot to explain where u receive those positive vibes from. thanks a lot <3
Plz Reply Sir
Sir Help Plz
can you make screen share app using this technique?
Hey. Where can I find WebSocket/p5.js Project Source Code? It is 404 now
Wow I think the code challenge is so cool. By the time you start the lecture [i think] everyone is so enthusiastic to learn from you after seeing you program like that … lol
I think im getting hypnotized by this startfield ??
my name is Inusah please i want to setup my own live video stream website on shared hosting accounts please assist me to do it.
کارت خیلی درسته اخوی
En español habra posibilidad que alguien haga un video de esto? 🙁
XDD I enjoyed and laughed a lot with this coding challenge, and the result was so cool!
Could you post the link to the JavaScript version in description, please?
how did you set up localhost:3000 ?
best video on youtube, thanks Coding Train.
working github repo:
https://github.com/CodingTrain/Rainbow-Code/tree/master/Node/sockets
Awesome video btw! 🙂
https://github.com/Newrichman/Rainbow-Code/tree/master/Node/sockets for those who can't open Websocket link on the desription
Anyone can write tutorial for this
Can someone please answer my query..can I use Processing.js
and do the same??????
Links are broken/missing?
Thx nic tutorial
genius
Hi Dan,
Can you explain me how to use web socket on Processing. I wanna read a data from server and animate accordingly on my processing CANVAS
cd command dont work, please
but what happens when 2 users use the canvas at the same time?
How can you save the canvas content so new users can join the current canvas drawing instead of seeing a new blank canvas?
Wow, amazing :O
I love your tutorial, I appreciate this so so so much! greetings from México.
Quick tip:
If your running windows use Git Bash because you can then use Unix commands (the ones he is using).
Hi Daniel , Repo address is not available , could you please share it ?
Hi, my server.js file looks exactly like yours but I still get the "cannot GET/" message on localhost:3000. i tried with app.use(express.static(__dirname + "/public")); but still no results, I can't get further; console sais "failed to load resource: the server responded with a sttus of 404( not found)" this is driving me insane what am I doing wrong
Great Job – Talk … as … fast…. as… you … like! I don't think you realise how much teaching your actually doing when your talking! It's great, really it is. It's helping to change my thought process when trying to navigate and learn javascript. I have never coded applications before, (I'm a system admin devops guy, so all my code are scripts, deployments, monitoring systems etc, and the occasional app that only needs to function, not look good!), and I've been in technology … a little while 😉
I'm looking into node just for fun, so that I can understand what it is most of my devs do at work. (I run infrastructure that holds about 900 java apps).
I just watched your 10 minute challenge building that star thingy it gave me an unbelievable insight into why no dev ever says no when they are given a challenge! I love that. I can't WAIT for the database stuff, …. all I need for you to do after that, is do some stuff in electron-shell …. and I'll be halfway to creating a million dollar app 🙂 that's the dream anyway hehe
1:08:40 Hahaha, it was a nice live =)