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)

No hay comentarios:

Publicar un comentario