2012-03-28 14 views
87

Quindi, sto provando a capire Socket.io ultimamente, ma non sono un programmatore supergreat, e quasi ogni esempio che riesco a trovare sul web (credetemi ho cercato ore e ore), ha cose extra che complicano cose. Molti esempi fanno un sacco di cose che mi confondono, o si collegano a qualche database strano, o usano coffeescript o tonnellate di librerie JS che ingombrano le cose.Che cos'è un esempio Socket.io più semplice possibile?

Mi piacerebbe vedere un esempio di funzionamento semplice in cui il server invia un messaggio al client ogni 10 secondi, dicendo che ora è, e il client scrive quei dati nella pagina o genera un avviso, qualcosa di molto semplice. Poi posso capire le cose da lì, aggiungere cose che mi servono come connessioni db, ecc. E sì, ho controllato gli esempi sul sito socket.io e non funzionano per me, e non capisco cosa fanno .

+4

Cosa c'è che non va nel primo esempio in (http://socket.io/#how-to-use)? Sembra abbastanza semplice per me ... – maerics

+0

Ciao, è un po 'tardi ma nessuno in futuro può trovare un buon tutorial qui usando socketio con nodejs. http: // programmerblog.net/using-socketio-with-nodejs/ –

risposta

131

Modifica: Ritengo che sia meglio per chiunque consultare l'eccellente chat example nella pagina iniziale di Socket.IO. L'API è stata abbastanza semplificata da quando ho fornito questa risposta. Detto questo, ecco la risposta originale aggiornata small-small per la nuova API.

Solo perché mi sento bello oggi:

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

Grazie mille, questo funziona ovviamente, e soprattutto, sto iniziando a capire come funziona. Molto gentile da parte tua scrivere questo, ho onestamente speso almeno 3 o 4 ore cercando di far funzionare tutto questo, triste come quello è ahah. Grazie mille Linus! – Cocorico

+0

Questo non funziona per me. Nel browser ottengo una pagina vuota. Sul lato server non ci sono uscite tranne "client autorizzato" e "handshake autorizzato". – Boris

+1

@Boris potresti avere questo problema se hai aperto il file index.html local. Se lo hai fatto, allora sostituisci i tag script con src = "http: //. Se stai ospitando su un server web, apri la console javascript e prova a identificare ciò che non funziona. – CodeMonkeyKing

16

Forse questo può aiutare pure. Ho avuto qualche problema a girare la testa intorno a come socket.io ha funzionato, quindi ho provato a far bollire un esempio il più possibile.

mi sono adattato questo esempio dall'esempio postato qui: http://socket.io/get-started/chat/

In primo luogo, avviare in una directory vuota, e creare un file molto semplice denominato package.json Inserire il seguente in esso.

{ 
"dependencies": {} 
} 

Avanti, sulla riga di comando, l'uso NPM per installare le dipendenze di cui abbiamo bisogno per questo esempio

$ npm install --save express socket.io 

Questa operazione potrebbe richiedere alcuni minuti a seconda della velocità della connessione di rete/CPU/etc Per verificare che tutto sia andato come previsto, è possibile visualizzare nuovamente il file package.json.

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

creare un file chiamato server.js Questo sarà ovviamente il nostro server gestito da nodo. Inserire il seguente codice in esso:

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

Creare l'ultimo file chiamato index.html e inserire il seguente codice in esso.

<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> 

È ora possibile verificare questo esempio molto semplice e vedere alcuni output simile al seguente:

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

Se si apre un browser web, e puntarlo al nome host si sta eseguendo il processo di nodo attivo, dovresti vedere gli stessi numeri visualizzati nel tuo browser, insieme a qualsiasi altro browser connesso che guarda la stessa pagina.

18

Ecco la mia richiesta!

se si inserisce questo codice in un file chiamato hello.js ed eseguito utilizzando il nodo hello.js dovrebbe stampare il messaggio ciao, è stato inviato tramite 2 socket.

Il codice mostra come gestire le variabili per un messaggio hello rimbalzato dal client al server tramite la sezione del codice con etichetta // Mirror.

I nomi delle variabili sono dichiarati localmente anziché tutti in alto perché vengono utilizzati solo in ciascuna delle sezioni tra i commenti. Ognuno di questi potrebbe essere in un file separato ed eseguire come proprio 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

Mi rendo conto che questo post è di diversi anni ormai, ma i neofiti come me hanno bisogno di un esempio funzionante, che è totalmente spogliato fino alla forma più semplice in assoluto a volte certificata.

ogni semplice esempio di socket.io potrei trovare coinvolto http.createServer(). ma cosa succede se si desidera includere un po 'di magia socket.io in una pagina Web esistente? ecco l'esempio più semplice e assoluto che potrei inventare.

questo restituisce appena una stringa passata dalla console UPPERCASED.

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 correre:

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

uso qualcosa di simile port test per garantire la vostra porta è aperta.

ora passare a http://localhost/index.html e utilizzare la console del browser per inviare messaggi al server.

a ipotesi migliore, quando si utilizza http.createServer, cambia le seguenti due righe per voi:

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

Spero che questo esempio molto semplice risparmia i miei compagni di neofiti qualche difficoltà. e si prega di notare che sono rimasto lontano dall'utilizzare la "parola riservata" cercando nomi di variabili definiti dall'utente per le mie definizioni di socket.

+1

' ogni semplice esempio di socket.io potrei trovare coinvolto http.createServer(). Ma cosa succede se vuoi includere un po 'di socket.io magic in una pagina web esistente? Mhm si ... 'var app = http.createServer ('- wut – mmcrae