Creative Computing

Joel Gethin Lewis

Unit 4 / Block 2: "Coding for Collaborative Web Development": Lecture 2: Functions, Websockets and Socket.IO

What I'm going to talk about today:

0. What questions to do you have for me?
1. New functionality around Functions - arrows, promises and async.
2. More functionality - Fetch
3. Matt DesLauriers' node.js/p5.js demos.
4. What are Websockets?
5. What is Socket.io? Building a shared canvas, building a chat room.
6. Matt DesLauriers' socket.io demos.
7. Golan Levin's and Char Stile's socket.io demos.
8. What questions to do you have for me?

0. What questions to do you have for me?

• What questions to do you have for me?
• What are your concerns? What are you worried about? What do you want to ask but you are embarrassed?
• All questions allowed!
• 5 minutes to message me on Slack in private.
• This idea came from Zach Lieberman. He does this exercise at the start of every session of School of Poetic Computation in New York.

1. New functionality around Functions - arrows, promises and async.

• Let's take a look at Matt DesLauriers' notes on functions in JavaScript.
• Matt also links to Tania Rascia's "Understanding Functions in JavaScript". Tania has LOADS of useful guides in her "Missing Instruction Manuals of the Web" series of articles.
• Formidable Labs also made an interactive guide to ES 6 (we don't need all of it). What is ES? It's short for ECMAScript, which was created to standardise JavaScript.
• Let's look at the MDN documentation for an asynchronous function.
• Let's look at the MDN guide to using Promises.

2. More functionality - Fetch.

• Let's look at the MDN documentation for the Fetch API. Fetch lets you grab data from your local computer or other computers on the Internet in a standardised way. Fetch demonstrates the use of Promises and is an asynchronous function - it executes outside of the normal draw loop in p5.js.
• I'd really recommend taking a look at this Coding Train playlist: "Working With Data & APIs in JavaScript".

3. Matt DesLauriers' node.js/p5.js demos.

• Let's take a look at Matt DesLauriers' node.js/p5.js examples: loading Palettes from a .json file, loading colors (sic) from a node.js server and loading Palettes from web based API.
• What else could you use these examples for?

4. What are Websockets?

• Quoting from MDN: "The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply."
• This means you can ask for some data from the server (or send it), and specify a function in your code to run when the reply comes in, while the rest of your code is running.
• Before these kinds of technologies, code would have to constantly ask again and again (or "poll") for information. Causing lots of unnecessary network traffic and making the code much more complicated.

5. What is Socket.io? Building a shared canvas, building a chat room.

• Socket.io is a JavaScript library made by Automattic (also makers of WordPress) that relies on WebSocket, but adds lots of useful features, like being able to broadcast to multiple sockets at once.
• Let's take a look at the two examples that are provided on the Socket.io website: a shared drawing canvas and a chat room.
• What else could you use these examples for?

6. Matt DesLauriers' socket.io demos.

• Let's take a look at Matt DesLauriers' most basic socket demo.
• Let's take a look at Matt DesLauriers' more complicated shared drawing canvas demo.
• Someone should make that last one work for mobile devices - message me on Slack if you are interested in doing that. How would you go about that? Let's discuss it.
• What else could you use these examples for?

7. Golan Levin's and Char Stiles socket.io demos.

• Bare Socket.io demo: "hit any key besides space to add a random number from 0 to 24 and space to display the average".
• Chatroom: "chatroom".
• Drawing game: "Multi-player drawing game using Socket.io & p5.js".
• Agar.io clone: "A simple implementation of the game agar.io".
• What else could you use these examples for?

8. What questions to do you have for me?

• What questions to do you have for me?
• What are your concerns? What are you worried about? What do you want to ask but you are embarrassed?
• All questions allowed!

Thanks!

• More about me: @joelgethinlewis
• Get in contact via the CCI Slack!
• Website:
  https://jgl.github.io/CCIDiploma-Summer2020/
• Today's slides:
  https://jgl.github.io/CCIDiploma-Summer2020/app_lecture_02.html