113

Entonces, he estado tratando de entender Socket.io últimamente, pero no soy un gran programador, y casi todos los ejemplos que puedo encontrar en la web (créanme que los he buscado durante horas y horas), tienen cosas adicionales que complican las cosas. Muchos de los ejemplos hacen un montón de cosas que me confunden, o se conectan a alguna base de datos extraña, o usan coffeescript o toneladas de bibliotecas JS que desordenan las cosas.

Me encantaría ver un ejemplo básico y funcional en el que 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. .

node.js socket.io Cocorico
fuente

4

¿Qué pasa con el primer ejemplo en ( socket.io/#how-to-use )? Me parece bastante simple ...

maerics

1

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

Jason W

154

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

Solo porque 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);

Linus Thiel
fuente

Muchas gracias, esto funciona, por supuesto, y lo que es más importante, estoy empezando a entender cómo funciona. Muy amable de su parte al escribir esto, honestamente pasé al menos 3 o 4 horas tratando de que todo esto funcionara, por muy triste que sea jaja. ¡Muchas gracias Linus!

Cocorico

Esto no me funciona. En el navegador aparece una página en blanco. En el lado del servidor no hay salidas excepto "cliente autorizado" y "protocolo de enlace autorizado".

Boris

1

@Boris, es posible que tenga ese problema si abrió 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 de JavaScript e intente identificar qué está fallando.

CodeMonkeyKing

4

inicialmente obtengo 'io no definido'; usé esto en su lugar <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > y ahora funciona

Alexander Mills

Debe ejecutar "npm init" y luego instalar socket io a través de npm "npm install socket.io --save"

Farid Movsumov

31

¡Aquí está mi presentación!

si pones este código en un archivo llamado hello.js y lo ejecutas usando el nodo hello.js, debería imprimir el mensaje hello, se ha enviado a través de 2 sockets.

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

Los nombres de las 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);

Expandir fragmento

error
fuente

Creo que esta debería ser la solución aceptada. Me ayudó al menos.

Daft Fox

21

Quizás esto también pueda ayudarte. Estaba teniendo problemas para entender cómo funcionaba socket.io, así que traté de resumir un ejemplo tanto como pude.

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

Primero, comience en un directorio vacío y cree un archivo muy simple llamado package.json Coloque lo siguiente en él.

{
"dependencies": {}
}

A continuación, en la línea de comando, use npm para instalar las dependencias que necesitamos para este ejemplo

$ npm install --save express socket.io

Esto puede demorar unos minutos dependiendo de la velocidad de su conexión de red / CPU / etc. Para verificar que todo salió según lo planeado, puede mirar el archivo package.json nuevamente.

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

Cree un archivo llamado server.js . Obviamente, este será nuestro servidor ejecutado por nodo. Coloque el siguiente código 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);

Cree el último archivo llamado index.html y coloque el siguiente código 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 un resultado similar al siguiente:

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

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

ray_voelker
fuente

10

Me doy cuenta de que esta publicación tiene varios años, pero a veces los novatos certificados como yo necesitamos un ejemplo de trabajo que esté totalmente reducido a la forma más simple.

cada ejemplo simple de socket.io que pude encontrar involucrado http.createServer (). pero, ¿qué pasa si quieres incluir un poco de magia socket.io en una página web existente? Aquí está el ejemplo más sencillo y pequeño que se me ocurrió.

esto solo devuelve una cadena pasada desde la consola EN 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>

correr:

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

use algo como esta prueba de puerto para asegurarse de que su puerto esté abierto.

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

en el mejor de los casos, al usar http.createServer, cambia las siguientes dos líneas por usted:

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

Espero que este ejemplo muy simple evite algunos problemas a mis compañeros novatos. y tenga en cuenta que me mantuve alejado de usar "palabra reservada" buscando nombres de variables definidos por el usuario para mis definiciones de socket.

edwardsmarkf
fuente

3

every simple socket.io example i could find involved http.createServer(). but what if you want to include a bit of socket.io magic in an existing webpage

mhm sí ... var app = http.createServer(- wut

Don Cheadle

1

Muy muy útil, me salvaste el día. Muchas gracias. Esta es la respuesta más simple sin cargar demasiado en node.js, este ejemplo es mejor para que todos los ingenieros comiencen y se familiaricen con node. Una vez más gracias

Karthik Elumalai

0

index.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #messages { margin-bottom: 40px }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function () {
        var socket = io();
        $('form').submit(function(){
          socket.emit('chat message', $('#m').val());
          $('#m').val('');
          return false;
        });
        socket.on('chat message', function(msg){
          $('#messages').append($('<li>').text(msg));
          window.scrollTo(0, document.body.scrollHeight);
        });
      });
    </script>
  </body>
</html>

index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(port, function(){
  console.log('listening on *:' + port);
});

Y ejecute estos comandos para ejecutar la aplicación.

npm init;  // accept defaults
npm  install  socket.io  http  --save ;
node start

y abra la URL: - El http://127.0.0.1:3000/puerto puede ser diferente. y verás esta SALIDA

Vishal Thakur
fuente

¿Cuál es un ejemplo del ejemplo de Socket.io más simple posible?

Respuestas:

index.html

app.js