實時流#30:使用WebSocket創建實時共享畫布



從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.j​​s: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.j​​s:https://p5js.org/

了解JavaScript基礎知識:

有關數據和API的更多信息:

幫助我們字幕和翻譯此視頻!

http://amara.org/v/Qbsw/

Conduct行為準則:https://github.com/CodingTrain/Code-of-Conduct。

33 comments
  1. 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

  2. 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?

  3. 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

  4. 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

  5. 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

Comments are closed.