app/ 0000755 1305210 1305210 00000000000 13423320221 006544 5 ustar app/.env 0000644 1305210 1305210 00000000426 13423317204 007346 0 ustar # Environment Config # store your secrets and config variables in here # only invited collaborators will be able to see your .env values # reference these in your code with process.env.SECRET SECRET= MADE_WITH= # note: .env is a shell file so there can't be spaces around = app/README.md 0000664 1305210 1305210 00000010714 13351055650 010043 0 ustar Intro to Socket.io ==================== [Socket.io](http://socket.io) is a javascript library that runs in both the browser and server to allow realtime communication between the two. This allows for collaborative web experiences where many people can interact on the same page, all without using a cumbersome database or even much backend code. Socket.io does this by having both a client-side and a server-side library which communicate with each other through named events that pass between the two (similar to the way keyboard and mouse events are handled). Below is a rough guide to how socket.io works on the client side and on the server side, and how the two communicate. #### Client Side On the client side, the socket.io client library needs to be included in the HTML: ```html ``` And the following line needs to be included at the top of your client.js file: ```javascript var socket = io() ``` The client can then send messages to the server in the following form ```javascript //the function takes a string and then an object full of data (any size) socket.emit('nameOfEvent', {data: "data you are sending to the server"}) ``` And the client can listen for messages from the server like so: ```javascript socket.on('nameOfServerEvent', function(data){ //the code you want to use on the data sent back from the server } ``` #### Server Side Just about all of your socket.io programs are going to want the following boilerplate in the server.js file. ```javascript var socket = require('socket.io'); var io = socket(server); io.sockets.on('connection', newConnection); //This function will be called whenever a new web browser visits the page. It runs as soon as a connection is set up with the server. function newConnection(socket){ console.log('new connection: ' + socket.id) //we put all the rest of our code inside that connection, because we only want it to run once we're connected //this section will have one or more event listeners that line up with various things that can happen on the client side (like sending a message in a chat app) socket.on('myEvent', myEventHandler); function myEventHandler(data){ //what you do in response to the event goes here //often you'll want one of the four 'emit' events listed below socket.broadcast.emit('myServerEvent', data); } } ``` **Server Side Cheat Sheet** ```javascript // sending to sender-client only socket.emit('message', "this is a test"); // sending to all clients, include sender io.emit('message', "this is a test"); // sending to all clients except sender socket.broadcast.emit('message', "this is a test"); // sending to individual socketid socket.broadcast.to(socketid).emit('message', 'for your eyes only'); ``` #### Message Passing Example: Chat Room A user logs into a chat room using socket.io. Once the page loads a connection is established, giving the user a unique id and trigger the newConnection function through the following part of the server code ```javascript io.sockets.on('connection', newConnection); function newConnection(socket){ //... } ``` The user enters their username on the client, and then types and sends a message into the chatroom. The following client-side code sends the message: ```javascript socket.emit('newMsg', {username:username, msg:msg}); ``` This is then handled by the appropriate handler on the server (with the matching name) ```javascript function newConnection(socket){ socket.on('newMsg', function(data){ //the same data from the client is sent to all other clients socket.broadcast.emit('newMsgFromServer', data) } } ``` The server receives the message and then sends it out to all other connected clients. This message from the server is then handled by the following code on the client: ```javascript socket.on('newMsgFromServer', function(data){ addMsg(data.username, data.msg) }) //This function uses jQuery to add the message to the HTML function addMsg(user, msg){ $('#messages').append("
"+user+": "+msg+"
") } ``` # Examples - [Chat Room](https://socketio-chat-room.glitch.me/) // [Edit on Glitch](https://glitch.com/edit/#!/socketio-chat-room?path=README.md:1:0) - [Shared Drawing](https://shared-drawing.glitch.me/) // [Edit on Glitch](https://glitch.com/edit/#!/shared-drawing?path=README.md:1:0) - [Agar.io-style Game](https://agario-lite.glitch.me/) // [Edit on Glitch](https://glitch.com/edit/#!/agario-lite?path=README.md:1:0) app/.node-gyp 0000777 1305210 1305210 00000000000 13371425224 012701 2/tmp/.node-gyp ustar app/public/ 0000755 1305210 1305210 00000000000 13423235232 010031 5 ustar app/public/azul/ 0000755 1305210 1305210 00000000000 13423314661 011010 5 ustar app/public/azul/sketch.js 0000644 1305210 1305210 00000004707 13423314661 012637 0 ustar var socket = io('/azul'); let value = 0; var sonido, sonidoWinner; var imageWin; var estado = "inicio"; //opciones: inicio/juego, win (inicio y juego en este caso es lo mismo) function preload(){ sonidoWinner = loadSound("https://cdn.glitch.com/9780a46b-2f10-4e0a-92c9-dde534123a73%2Fyeahh%20Siscu_edit.ogg?1548588467281"); sonido = loadSound("https://cdn.glitch.com/a9f8d7ee-d2f6-4515-b9ea-d60d4cf2d387%2F161355__dream4dreamtheater__f-k-you.ogg?1548507867188"); imageWin = loadImage("https://cdn.glitch.com/9780a46b-2f10-4e0a-92c9-dde534123a73%2FMcCloud.png?1548580970911"); imageLooser = loadImage("https://cdn.glitch.com/9780a46b-2f10-4e0a-92c9-dde534123a73%2FMcCloud_pierde.png?1548585047023"); font = loadFont('https://cdn.glitch.com/a9f8d7ee-d2f6-4515-b9ea-d60d4cf2d387%2Fmrsmonsteracad.ttf?1548485928116'); } function setup(){ createCanvas(windowWidth,windowHeight); // pruebo esto para deshabilitar el refresh al mover el dedo hacia abajo $("html").css({ "touch-action": "pan-down" }); socket.on('connect', function() { var sessionid = socket.id; console.log("socket.id: " + sessionid); }); socket.on('win', function() { var sessionid = socket.id; console.log("WIN!! "); estado = "win"; sonidoWinner.play(); }); socket.on('looser', function() { var sessionid = socket.id; console.log("PIERDES!! "); estado = "looser"; //sonidoLooser.play(); }); textFont(font); textAlign(CENTER, CENTER); } function draw(){ background(0,20); noStroke(); fill(100,100,255); rect(0,0,width,height); if (estado === "win") { muestraImagenWin(); } else if (estado === "looser") { muestraImagenLooser(); } else { noStroke(); textSize(50); fill(255,150); text("Agítame!!!", width/2, height/2); } } function muestraImagenWin() { imageMode(CENTER); image(imageWin, width/2, height/2, imageWin.width/2, imageWin.height/2); imageMode(CORNER); } function muestraImagenLooser() { imageMode(CENTER); image(imageLooser, width/2, height/2, imageWin.width/2, imageWin.height/2); imageMode(CORNER); } function deviceShaken() { if (estado === "inicio") { value = value + 5; if (value > 25) { value = 0; socket.emit('shaken', {num:10}); sonido.play(); } } } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function touchStarted() { if(estado === "win" || estado === "looser") { estado = "inicio"; } } app/public/azul/index.html 0000644 1305210 1305210 00000001250 13423041753 013002 0 ustar