Diferència entre revisions de la pàgina «NF1 - WEBSOCKETS»

De wikiserver
Dreceres ràpides: navegació, cerca
(→‎RECIBIR MENSAJE EL CLIENTE)
(→‎ENVIAR MENSAJE AL CLIENTE)
Línia 81: Línia 81:
  
 
<source lang="html">
 
<source lang="html">
 +
<!DOCTYPE html>
 
<html>
 
<html>
−
<head>
+
  <head>
−
<script src="/socket.io/socket.io.js"></script>
+
<script src="./node_modules/socket.io-client/dist/socket.io.js"></script>
 +
<!-- debe ser la ruta en la cual está instalado nuestra biblioteca socket.io-->
 +
 
 
<script>
 
<script>
−
 
+
//conectamos el cliente con el servidor de websockets que tenemos en http://localhost:8080
 +
// y escuchamos el evento mensajes y obteniendo el array en data.
 
var socket = io.connect('http://localhost:8080', { 'forceNew': true });
 
var socket = io.connect('http://localhost:8080', { 'forceNew': true });
 +
// var socket = io.connect('http://localhost');
  
−
var mensaje = {    //JSON que vamos a enviar
+
socket.on('mensa', function(data) {
−
    profesor: "julio noguera",
 
−
    texto: "Qué alegría teneros en clase!!"
 
−
  };
 
−
 
 
−
socket.emit('nuevo_mensaje', mensaje);  // recoge el JSON y los envía por el socket con el mensaje para que lo escuche el servidor con el evento 'nuevo_mensaje'.
 
−
 
 
−
 
 
−
socket.on('mensajes', function(data) {   //escucha el evento 'mensajes'  si el servidor envía algo.
 
 
         document.write("Bienvenidos.digo");
 
         document.write("Bienvenidos.digo");
−
console.log(data);   
+
  console.log(data);   
 
});
 
});
  
 +
var mensajes= [{
 +
    profesor: "Julio",
 +
    texto: "Estoy en el cliente y me voy al servidor"
 +
},{
 +
    alumno: "Alumno1",
 +
    texto: "Gracias por la info"
 +
},{
 +
    alumno: "Alumno1",
 +
    texto: "Perfecto!"
 +
}];
 +
 +
socket.emit('mensajes', mensajes);
 
</script>
 
</script>
  
 
<body>Hello world</body>
 
<body>Hello world</body>
−
 
 
</html>
 
</html>
  
Línia 113: Línia 121:
 
<source lang="javascript">
 
<source lang="javascript">
  
−
var messages = [{
+
var express = require('express');
−
     author: "Carlos",
+
var app = express();
−
     text: "Hola! que tal?"
+
var path = require('path');
 +
var server = require('http').Server(app);
 +
var io = require('socket.io')(server);
 +
 
 +
 
 +
app.use(express.static(path.join(__dirname, '/'))); //Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript,
 +
 
 +
server.listen(8080, function() {  ////Pondremos el servidor a escuchar en localhost con el puerto 8080
 +
  console.log('Servidor corriendo en http://localhost:8080');
 +
});
 +
 
 +
// array de mensajes
 +
var msn= [{
 +
     profesor: "Julio",
 +
     texto: "Hola! ¿Cómo estáis?"
 
},{
 
},{
−
     author: "Pepe",
+
     profesor: "Alumno1",
−
     text: "Muy bien! y tu??"
+
     texto: "Muy bien! ¿y tú?"
 +
},{
 +
    profesor: "Alumno1",
 +
    texto: "Perfecto!"
 
}];
 
}];
  
−
socket.on('nuevo_mensaje', function(data) {     //escucha del cliente si le ha enviado algo desde el evento 'nuevo_mensaje'
+
 
−
var info= messages.push(data);           //lo añade dentro de array mensaje
+
//servidor de websockets, que lo tenemos en la variable io, esté atento a que se realice una conexión. Eso lo logramos con io.on() y pasándole el mensaje connection, también tenemos el método en el cual enviaremos el array de objetos mensaje con el evento 'mensajes'
−
io.sockets.emit('mensajes', info);       //envía otra vez al cliente que estará escuchando con el evento 'mensaje' el objeto info 
+
 
 +
io.on('connection', function(socket) {
 +
        console.log('Un cliente se ha conectado');
 +
        socket.emit('mensa', msn);
 +
        socket.on('mensajes', function(data) {
 +
        console.log(data);
 
});
 
});
 +
 +
});
 +
 +
 
</source>
 
</source>

Revisió del 13:27, 26 nov 2017

WEBSOCKETS

Introducción

Los websockets son una tecnología que permite una comunicación bidireccional entre cliente y servidor sobre un único socket TCP. En cierta manera es un buen sustituto de AJAX como tecnología para obtener datos del servidor, ya que no tenemos que pedirlos, el servidor nos los enviará cuando haya nuevos. Podemos utilizar diferentes bibliotecas para utilizar esta tecnología con websocket (ws) más básica y la que vamos a trabajar que es algo más completa sockets.io.

Si queremos montar nuestro servidor en windows primero debemos instalar Nodejs que es el servidor que vamos a instalar, nos creamos una carpeta y hacemos la instalción de lo framework Express y nuestra biblioteca socket.identro de esa ruta, por ejemplo, C:\Users\pc\websocket2. 

$ npm install --save express
$ npm install --save socket.io

RECIBIR MENSAJE EL CLIENTE

nos creamos un archivo dentro de la carpeta websocket llamado 'server.js' que será nuestro código en el servidor e introducimos: 

var express = require('express');
var app = express();
var path = require('path');
var server = require('http').Server(app);
var io = require('socket.io')(server);


app.use(express.static(path.join(__dirname, '/'))); //Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript,

server.listen(8080, function() {   ////Pondremos el servidor a escuchar en localhost con el puerto 8080
  console.log('Servidor corriendo en http://localhost:8080');
});

// array de mensajes
var mensajes= [{
    profesor: "Julio",
    texto: "Hola! ¿Cómo estáis?"
},{
    profesor: "Alumno1",
    texto: "Muy bien! ¿y tú?"
},{
    profesor: "Alumno1",
    texto: "Perfecto!"
}];


//servidor de websockets, que lo tenemos en la variable io, esté atento a que se realice una conexión. Eso lo logramos con io.on() y pasándole el mensaje connection, también tenemos el método en el cual enviaremos el array de objetos mensaje con el evento 'mensajes'

io.on('connection', function(socket) {
  console.log('Un cliente se ha conectado');
        socket.emit('mensajes', mensajes);
});

por parte del cliente tendremos que introducir el siguiente código 

<!DOCTYPE html>
<html>
  <head>
<script src="./node_modules/socket.io-client/dist/socket.io.js"></script>
<!-- debe ser la ruta en la cual está instalado nuestra biblioteca socket.io-->

<script>
//conectamos el cliente con el servidor de websockets que tenemos en http://localhost:8080 
// y escuchamos el evento mensajes y obteniendo el array en data.
var socket = io.connect('http://localhost:8080', { 'forceNew': true });
// var socket = io.connect('http://localhost');

socket.on('mensajes', function(data) {
        document.write("Bienvenidos.digo");
  console.log(data);  
});
</script>

<body>Hello world</body>
</html>

cuando ya tengamos nuestro fichero 'server.js' en terminal escribimos 'node server.js'

ENVIAR MENSAJE AL CLIENTE

<!DOCTYPE html>
<html>
  <head>
<script src="./node_modules/socket.io-client/dist/socket.io.js"></script>
<!-- debe ser la ruta en la cual está instalado nuestra biblioteca socket.io-->

<script>
//conectamos el cliente con el servidor de websockets que tenemos en http://localhost:8080 
// y escuchamos el evento mensajes y obteniendo el array en data.
var socket = io.connect('http://localhost:8080', { 'forceNew': true });
// var socket = io.connect('http://localhost');

socket.on('mensa', function(data) {
        document.write("Bienvenidos.digo");
  console.log(data);  
});

var mensajes= [{
    profesor: "Julio",
    texto: "Estoy en el cliente y me voy al servidor"
},{
    alumno: "Alumno1",
    texto: "Gracias por la info"
},{
    alumno: "Alumno1",
    texto: "Perfecto!"
}];

socket.emit('mensajes', mensajes);
</script>

<body>Hello world</body>
</html>

server.js 

var express = require('express');
var app = express();
var path = require('path');
var server = require('http').Server(app);
var io = require('socket.io')(server);


app.use(express.static(path.join(__dirname, '/'))); //Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript,

server.listen(8080, function() {   ////Pondremos el servidor a escuchar en localhost con el puerto 8080
  console.log('Servidor corriendo en http://localhost:8080');
});

// array de mensajes
var msn= [{
    profesor: "Julio",
    texto: "Hola! ¿Cómo estáis?"
},{
    profesor: "Alumno1",
    texto: "Muy bien! ¿y tú?"
},{
    profesor: "Alumno1",
    texto: "Perfecto!"
}];


//servidor de websockets, que lo tenemos en la variable io, esté atento a que se realice una conexión. Eso lo logramos con io.on() y pasándole el mensaje connection, también tenemos el método en el cual enviaremos el array de objetos mensaje con el evento 'mensajes'

io.on('connection', function(socket) {
        console.log('Un cliente se ha conectado');
        socket.emit('mensa', msn);
        socket.on('mensajes', function(data) {
        console.log(data);  
});

});
Obtingut de «http://wikiserver.infomerce.es/index.php?title=NF1_-_WEBSOCKETS&oldid=8666»