2012-03-28 22 views
87

Por lo tanto, he estado tratando de entender Socket.io últimamente, pero no soy un programador supergreat, y casi todos los ejemplos que puedo encontrar en la web (créanme que he buscado durante horas y horas), tiene material extra que complica cosas. Muchos de los ejemplos hacen un montón de cosas que me confunden, o me conectan a una base de datos extraña, o usan coffeescript o toneladas de bibliotecas JS que complican las cosas.¿Cuál es un ejemplo del ejemplo de Socket.io más simple posible?

Me encantaría ver un ejemplo básico y funcional donde el servidor simplemente envía un mensaje al cliente cada 10 segundos, diciendo qué hora es, y el cliente escribe esos datos en la página o lanza una alerta, algo muy simple. Entonces puedo resolver las cosas a partir de ahí, agregar cosas que necesito como conexiones db, etc. Y sí, he comprobado los ejemplos en el sitio socket.io y no funcionan para mí, y no entiendo lo que hacen .

+4

¿Qué pasa con el primer ejemplo en (http://socket.io/#how-to-use)? Parece bastante simple para mí ... – maerics

+0

Hola, es un poco tarde pero cualquiera en el futuro puede encontrar un buen tutorial aquí en el uso de socketio con nodejs. http: // programmerblog.net/using-socketio-with-nodejs/ –

Respuesta

131

Edit: Creo que es mejor para cualquiera consultar el excelente chat example en la página de inicio Socket.IO. La API se ha simplificado bastante desde que proporcioné esta respuesta. Dicho esto, aquí está la respuesta original actualizada pequeño-pequeño para la API más nueva.

El hecho de que me siento bien hoy:

index.html

<!doctype html> 
<html> 
    <head> 
     <script src='/socket.io/socket.io.js'></script> 
     <script> 
      var socket = io(); 

      socket.on('welcome', function(data) { 
       addMessage(data.message); 

       // Respond with a message including this clients' id sent from the server 
       socket.emit('i am client', {data: 'foo!', id: data.id}); 
      }); 
      socket.on('time', function(data) { 
       addMessage(data.time); 
      }); 
      socket.on('error', console.error.bind(console)); 
      socket.on('message', console.log.bind(console)); 

      function addMessage(message) { 
       var text = document.createTextNode(message), 
        el = document.createElement('li'), 
        messages = document.getElementById('messages'); 

       el.appendChild(text); 
       messages.appendChild(el); 
      } 
     </script> 
    </head> 
    <body> 
     <ul id='messages'></ul> 
    </body> 
</html> 

app.js

var http = require('http'), 
    fs = require('fs'), 
    // NEVER use a Sync function except at start-up! 
    index = fs.readFileSync(__dirname + '/index.html'); 

// Send index.html to all requests 
var app = http.createServer(function(req, res) { 
    res.writeHead(200, {'Content-Type': 'text/html'}); 
    res.end(index); 
}); 

// Socket.io server listens to our app 
var io = require('socket.io').listen(app); 

// Send current time to all connected clients 
function sendTime() { 
    io.emit('time', { time: new Date().toJSON() }); 
} 

// Send current time every 10 secs 
setInterval(sendTime, 10000); 

// Emit welcome message on connection 
io.on('connection', function(socket) { 
    // Use socket to communicate with this particular client only, sending it it's own id 
    socket.emit('welcome', { message: 'Welcome!', id: socket.id }); 

    socket.on('i am client', console.log); 
}); 

app.listen(3000); 
+0

Muchas gracias, esto funciona, por supuesto, y más importante, estoy empezando a entender cómo funciona esto. Muy amable de su parte al escribir esto, honestamente pasé al menos 3 o 4 horas tratando de hacer que todo esto funcione, tan triste como eso es jaja. ¡Muchísimas gracias, Linus! – Cocorico

+0

Esto no funciona para mí. En el navegador me aparece una página en blanco. En el lado del servidor no hay salidas, excepto "cliente autorizado" y "apretón de manos autorizado". – Boris

+1

@ Boris, es posible que tenga ese problema si abre el archivo index.html local. Si lo hizo, reemplace las etiquetas de script con src = "http: //. Si está alojando en un servidor web, abra la consola javascript e intente identificar lo que está fallando. – CodeMonkeyKing

16

Tal vez esto puede ayudar a usted también. Estaba teniendo problemas para entender cómo funcionaba socket.io, así que traté de dar un ejemplo tanto como pude.

Adapté este ejemplo a partir del ejemplo publicado aquí: http://socket.io/get-started/chat/

primer lugar, comenzar en un directorio vacío, y crear un archivo muy simple llamado package.json Coloque el siguiente en él.

{ 
"dependencies": {} 
} 

A continuación, en la línea de comandos, el uso NPM para instalar las dependencias que necesitamos para este ejemplo

$ npm install --save express socket.io 

Esto puede tardar unos minutos dependiendo de la velocidad de su conexión de red/CPU/etc Para comprobar que todo salió según lo planeado, puede consultar el archivo .json de nuevo.

$ cat package.json 
{ 
    "dependencies": { 
    "express": "~4.9.8", 
    "socket.io": "~1.1.0" 
    } 
} 

crear un archivo llamado server.js Esto, obviamente, será nuestro servidor gestionado por nodo. Coloque el código siguiente en él:

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

app.get('/', function(req, res){ 

    //send the index.html file for all requests 
    res.sendFile(__dirname + '/index.html'); 

}); 

http.listen(3001, function(){ 

    console.log('listening on *:3001'); 

}); 

//for testing, we're just going to send data to the client every second 
setInterval(function() { 

    /* 
    our message we want to send to the client: in this case it's just a random 
    number that we generate on the server 
    */ 
    var msg = Math.random(); 
    io.emit('message', msg); 
    console.log (msg); 

}, 1000); 

Crear el último archivo llamado index.html y coloque el código siguiente en él.

<html> 
<head></head> 

<body> 
    <div id="message"></div> 

    <script src="/socket.io/socket.io.js"></script> 
    <script> 
    var socket = io(); 

    socket.on('message', function(msg){ 
     console.log(msg); 
     document.getElementById("message").innerHTML = msg; 
    }); 
    </script> 
</body> 
</html> 

Ahora puede probar este ejemplo muy simple y ver algunos salida similar a la siguiente:

$ node server.js 
listening on *:3001 
0.9575486415997148 
0.7801907607354224 
0.665313188219443 
0.8101786421611905 
0.890920243691653 

Si usted abre un navegador web, y el punto al nombre de host se está ejecutando el proceso de nodo activado, debería ver aparecer los mismos números en su navegador, junto con cualquier otro navegador conectado que mire esa misma página.

18

¡Aquí está mi envío!

si coloca este código en un archivo llamado hello.js y lo ejecuta usando el nodo hello.js, debe imprimir el mensaje hola, se ha enviado a través de 2 sockets.

El código muestra cómo manejar las variables para un mensaje de saludo devuelto del cliente al servidor a través de la sección de código etiquetada // Espejo.

Los nombres de variables se declaran localmente en lugar de todos en la parte superior porque solo se usan en cada una de las secciones entre los comentarios. Cada uno de estos podría estar en un archivo separado y ejecutarse como su propio nodo.

// Server 
 
var io1 = require('socket.io').listen(8321); 
 

 
io1.on('connection', function(socket1) { 
 
    socket1.on('bar', function(msg1) { 
 
    console.log(msg1); 
 
    }); 
 
}); 
 

 
// Mirror 
 
var ioIn = require('socket.io').listen(8123); 
 
var ioOut = require('socket.io-client'); 
 
var socketOut = ioOut.connect('http://localhost:8321'); 
 

 

 
ioIn.on('connection', function(socketIn) { 
 
    socketIn.on('foo', function(msg) { 
 
    socketOut.emit('bar', msg); 
 
    }); 
 
}); 
 

 
// Client 
 
var io2 = require('socket.io-client'); 
 
var socket2 = io2.connect('http://localhost:8123'); 
 

 
var msg2 = "hello"; 
 
socket2.emit('foo', msg2);

7

Soy consciente de que este post es de hace varios años, pero los novatos como yo necesitamos un ejemplo de trabajo que está totalmente despojado de absoluta la forma más simple a veces certificada.

cada ejemplo simple de socket.io podría encontrar involucrado http.createServer(). pero, ¿y si quieres incluir un poco de magic socket.io en una página web existente? aquí está el ejemplo más fácil y más pequeño que pude encontrar.

esto simplemente devuelve una cadena pasada desde la consola MAYÚSCULAS.

app.js

var http = require('http'); 

var app = http.createServer(function(req, res) { 
     console.log('createServer'); 
}); 
app.listen(3000); 

var io = require('socket.io').listen(app); 


io.on('connection', function(socket) { 
    io.emit('Server 2 Client Message', 'Welcome!'); 

    socket.on('Client 2 Server Message', function(message)  { 
     console.log(message); 
     io.emit('Server 2 Client Message', message.toUpperCase());  //upcase it 
    }); 

}); 

index.html:

<!doctype html> 
<html> 
    <head> 
     <script type='text/javascript' src='http://localhost:3000/socket.io/socket.io.js'></script> 
     <script type='text/javascript'> 
       var socket = io.connect(':3000'); 
       // optionally use io('http://localhost:3000'); 
       // but make *SURE* it matches the jScript src 
       socket.on ('Server 2 Client Message', 
        function(messageFromServer)  { 
         console.log ('server said: ' + messageFromServer); 
        }); 

     </script> 
    </head> 
    <body> 
     <h5>Worlds smallest Socket.io example to uppercase strings</h5> 
     <p> 
     <a href='#' onClick="javascript:socket.emit('Client 2 Server Message', 'return UPPERCASED in the console');">return UPPERCASED in the console</a> 
       <br /> 
       socket.emit('Client 2 Server Message', 'try cut/paste this command in your console!'); 
     </p> 
    </body> 
</html> 

a ejecutar:

npm init; // accept defaults 
npm install socket.io http --save ; 
node app.js & 

uso algo como esto port test para asegurar que su puerto está abierto.

ahora navegue hasta http://localhost/index.html y use la consola de su navegador para enviar mensajes de vuelta al servidor.

en el mejor conjetura, al utilizar http.createServer, cambia las dos líneas siguientes para usted:

<script type='text/javascript' src='/socket.io/socket.io.js'></script> 
var socket = io(); 

espero que este ejemplo muy simple perdona mis compañeros novatos algunas dificultades. y tenga en cuenta que me mantuve alejado de usar "palabras reservadas" buscando nombres de variables definidos por el usuario para mis definiciones de socket.

+1

' cada ejemplo simple de socket.io podría encontrar http.createServer involucrado(). Pero ¿y si quieres incluir un poco de magic socket.io en una página web existente? Mhm sí ... 'var app = http.createServer ('- wut – mmcrae