Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

[dist] Agregado #nodeIO Cap.3

  • Loading branch information...
commit 64c1bc1bb83c67839d286266ae247de92745d7cf 1 parent 96acbfb
@alejandro authored
View
55 03/app/index.html
@@ -0,0 +1,55 @@
+<html>
+<head>
+ <title>WebSockets Demo</title>
+<link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+ <section id="wrapper">
+ <h1>Hola, yo uso WebSockets</h1>
+ <span id="msgs"></span>
+
+ <video id="stream" autoplay width="300" height="300">
+ </video>
+ <canvas class="hide" id="preview" width="300", height="230">
+ </canvas>
+ <button id="tomarFoto">Tomar!</button>
+ <ul id="imagenes">
+ </ul>
+ </section>
+
+
+ <script type="text/html" id="imgTmpl">
+ <li id="%id">
+ <img src="%src" />
+ </li>
+ </script>
+
+ <script type="text/javascript" src="/socket.io/socket.io.js"></script>
+ <script type="text/javascript" src="scripts/camara.js"></script>
+ <script type="text/javascript">
+ var $status = window.msgs;
+ var tmpl = window.imgTmpl.textContent;
+ var $ul = window.imagenes;
+
+ App.ws = io.connect('/');
+
+ App.ws.on('ready', function(){
+ $status.textContent = 'WebSockets Listos!';
+ });
+
+ App.insert = function insert(id, data){
+ $status.textContent = 'Imagen ' + id + ' agregada!'
+ $ul.innerHTML += tmpl.replace('%id', id)
+ .replace('%src', data);
+
+ };
+
+ App.ws.on('imagen', function(imagen){
+ App.insert(imagen.id, imagen.data);
+ });
+
+ App.camara();
+ </script>
+
+</body>
+</html>
View
34 03/app/scripts/camara.js
@@ -0,0 +1,34 @@
+navigator.getUserMedia = navigator.getUserMedia
+ || navigator.webkitGetUserMedia
+ || navigator.mozGetUserMedia;
+
+URL = window.URL || window.mozURL || window.webkitURL;
+
+var App = {};
+
+App.camara = function (){
+ var video = window.stream;
+ var btn = window.tomarFoto;
+ var canvas = window.preview;
+
+ navigator.getUserMedia({video: 1}, function (stream){
+ video.src = URL.createObjectURL(stream);
+ canvas.height = video.height;
+ canvas.width = video.width;
+
+ btn.addEventListener('click', function() {
+ var imagen;
+ canvas
+ .getContext('2d')
+ .drawImage(video,
+ 0, 0, 300, 230);
+ imagen = {
+ id: 'image-' + (Date.now()),
+ data: canvas.toDataURL('image/png')
+ };
+ App.insert(imagen.id, imagen.data);
+ App.ws.emit('imagen', imagen);
+ });
+
+ }, function (error){});
+};
View
15 03/app/styles.css
@@ -0,0 +1,15 @@
+body {
+ font-family: Helvetica, Arial;
+}
+.hide {
+ display: none;
+}
+span { display: block}
+ul {
+ list-style: none;
+ width: 100%;
+}
+
+li {
+ display: inline;
+}
View
20 03/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "WebSockets",
+ "version": "0.0.0",
+ "description": "Una aplicación para compartir imagenes",
+ "main": "server/index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": "",
+ "keywords": [
+ "websockets",
+ "socket.io"
+ ],
+ "author": "Alejandro Morales",
+ "license": "BSD",
+ "dependencies": {
+ "socket.io": "~0.9.13",
+ "express": "~3.1.0"
+ }
+}
View
19 03/server/index.js
@@ -0,0 +1,19 @@
+/**
+ * Servidor para las conexiones WebSocket
+ * ------------
+ * desarrolloweb.com
+ * Alejandro Morales
+ */
+
+var http = require('http');
+var express = require('express');
+var websockets = require('./ws')
+var server = express();
+
+server.use(express.static(__dirname + '/../app'))
+
+
+http.createServer(server).listen(process.env.PORT || 3000, function (){
+ console.log('Servidor disponible en %d', this.address().port)
+ websockets(this)
+})
View
15 03/server/ws.js
@@ -0,0 +1,15 @@
+
+module.exports = function (servidor){
+
+ var sio = require('socket.io');
+ var ws = sio.listen(servidor);
+
+ // websocket, htmlfile, xhr-polling, jsonp-polling
+ ws.on('connection', function (socket){
+ socket.emit('ready',{title: 'Ready'})
+ socket.on('imagen', function (imagen){
+ socket.broadcast.emit('imagen', imagen)
+ })
+ })
+
+};
Please sign in to comment.
Something went wrong with that request. Please try again.