lunes, 16 de marzo de 2015

javascript: mezclando Objetos


function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

http://jsfiddle.net/ric47121/dwewcoam/

jueves, 12 de marzo de 2015

HTML5 y Nodejs: WebSockets y Node.js - Simple Chat (Pasando Objetos)

luego de instalar Node.js
agregar Sockets con "npm install nodejs-websocket"
pero como a mi no me funcionaba el npm descargue el paquete y lo instale desde la carpeta
asi: "npm install "
la carpeta era nodejs-websocket-master descargado de https://www.npmjs.com/package/nodejs-websocket

El cliente:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chat example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>

var user_colour = "red"
var nickname = ""
var ws
window.addEventListener("load", function () {
 // var url = "ws://"+"127.0.0.1" +":7500" 
 var url = "ws://"+"192.168.30.112" +":7500" 

 nickname = prompt("Choose a nickname") 
 console.log("conectando a: ", url)

 if (nickname) {
  ws = new WebSocket(url)
  
  ws.onopen = function () {
   console.log("ws opened")
   
   //me identifico
   //ws.send(nickname)
   ws.send(JSON.stringify({name: nickname, message: "soy_nuevo", color: user_colour})); 

   document.getElementById("form").onsubmit = function (event) {
    var msg = document.getElementById("msg")
    if (msg.value){
     // ws.send(msg.value)
     ws.send(JSON.stringify({name: nickname, message: msg.value})); 
    }
     

    msg.value = ""
    event.preventDefault()
   } 
  }
  ws.onclose = function () {
   console.log("ws closed")
  }
  ws.onerror = function () {
   console.error("ws error")
  }
  ws.onmessage = function (ev) {
   // console.log("ev", ev)
   // console.log("ev.data", ev.data)
   var objMsj = JSON.parse(ev.data); 

   if(objMsj.systemMsj){

    $("#div_cant_users").html(objMsj.cantUsuarios)

    console.log(objMsj.cantUsuarios)

   }else{
    var div = document.createElement("div")
    div.textContent = objMsj.name + ": " + objMsj.message
    document.body.appendChild(div)

   }


  }
 }
})
</script>
</head>

<body>
cant de Usuarios: <span id="div_cant_users">0</span>

<form id="form">
Message: <input size="50" id="msg"> <input type="submit" value="Submit">
</form>
</body>
</html>

El servidor:
// var http = require("http")
var ws = require("./node_modules/nodejs-websocket")
var fs = require("fs")

// http.createServer(function (req, res) {
 // fs.createReadStream("index.html").pipe(res)
// }).listen(8080)

var usuarios_conectados = []

var server = ws.createServer(function (connection) {
 connection.nickname = null
 connection.on("text", function (strObj) {

  // console.log(strObj)
  var obj = JSON.parse(strObj); 
  // console.log(obj) //

  // console.log(server.connections) //string object grande
  // console.log("server.connections.length", server.connections.length) //string object grande
  console.log("Cant Conexiones: ", server.connections.length) //string object grande
  enviar_system_mensaje({systemMsj: true, cantUsuarios: server.connections.length})

  if (connection.nickname === null) {
   // connection.nickname = strObj
   connection.nickname = obj.name
   // broadcast(obj.name+" ingreso!")

   var mensaje = JSON.stringify({
    name: connection.nickname, 
    message: "Ingreso!"
   })

   broadcast(mensaje)
   console.log(mensaje)

  } else{
   //si ya esta registrado reenvio a todos lo que manda
   // broadcast("["+connection.nickname+"] "+obj.message)
 
   var mensaje = JSON.stringify({
    name: connection.nickname, 
    message: obj.message
   })

   broadcast(mensaje)
   console.log(mensaje)
   
  }
   
  // console.log("connection.nickname", connection.nickname)

 })

 connection.on("close", function () {
  // broadcast(connection.nickname+" se fue")

  var mensaje = JSON.stringify({
   name: connection.nickname, 
   message: "Se ha ido"
  })

  broadcast(mensaje)
  console.log(mensaje)

  console.log("Cant Conexiones: ", server.connections.length)

  var str=""
  server.connections.forEach(function (connection) {
   str += connection.nickname + ", "
  })

  // console.log("estan: ", server.connections)
  console.log("estan: ", str)

  enviar_system_mensaje({systemMsj: true, cantUsuarios: server.connections.length})

 })
})
server.listen(7500)

function broadcast(str) {
 server.connections.forEach(function (connection) {
  connection.sendText(str)
 })
}

function enviar_system_mensaje(objMsj) {
 var mensaje = JSON.stringify(objMsj)

 broadcast(mensaje)
 // console.log(mensaje)
}


console.log("Server creado en puerto: ", 7500)

martes, 10 de marzo de 2015

javascript: Objetos y Colecciones en JavaScript - Otra Manera

function Jugador(O) {
   //I = I || {};
   var I = {}
 
   /************ Atributos *******************/
   // valores x defecto 
   I.name = I.name;
   I.active = true;
   I.color = "#00A";
   I.x = 350;
   I.y = 270;
   I.pos_x_ant = 0;
   I.pos_y_ant = 0;
   I.width = 32;
   I.height = 32;
   I.disparo = false; //si ya disparo
   I.playerBullets = [];
   I.velocidad = VELOCIDAD_JUGADOR;

   //mezclo los valores x defecto y los que vienen 
   I = $.extend({}, I, O); 

   /************ Metodos *******************/
   I.disparar = function(sentido) {
    //console.log("pium")

  if(!this.disparo){
     var bulletPosition = this.midpoint();

     if(sentido == 'abajo') velocidad = -5
      else velocidad = 5

       //agrego nuevos disparos
     this.playerBullets.push(Bullet({
       speed: velocidad,
       x: bulletPosition.x,
       y: bulletPosition.y
     }))

   this.disparo = true;
  }else{
   //this.disparo = false;
  }
   }
 }

 //////////////////////////////////////////////////////////////////

 function Bullet(I) {
   I.active = true;

   I.xVelocity = 0;
   I.yVelocity = -I.speed;
   I.width = 3;
   I.height = 10;
   I.color = "red";

   I.inBounds = function() { //true si sigue dentro de la pantalla
     return I.x >= 0 && I.x <= PANTALLA_ANCHO &&
       I.y >= 0 && I.y <= PANTALLA_ALTO;
   };

   I.draw = function() {
     canvas.fillStyle = this.color;
     canvas.fillRect(this.x, this.y, this.width, this.height);
   };

   I.update = function() {
     I.x += I.xVelocity;
     I.y += I.yVelocity;

     I.active = I.active && I.inBounds();
   };

   return I;
 }

 //////////////////////////////////////////////////////////////////
 // Ejecucion del Programa ////////////////////////////////////////
 //////////////////////////////////////////////////////////////////
 var player = Jugador({
  name: 'ric', //playerName
  color: 'red',
  x: 65,
  y: 35
 });

 player.disparar('arriba')
 player.disparar('arriba')
 player.disparar('arriba')

 //limpiar el array de balas (sacar las viejas o fuera del escenario)
 player.playerBullets = player.playerBullets.filter(function(b){
  return b.active == true   
 })