Qual è un esempio del più semplice esempio possibile di Socket.io?


113

Quindi, ultimamente ho cercato di capire Socket.io, ma non sono un gran programmatore e quasi tutti gli esempi che posso trovare sul web (credetemi, ho cercato ore e ore), hanno cose extra che complicano le cose. Molti esempi fanno un sacco di cose che mi confondono, o si collegano a qualche strano database, o usano coffeescript o tonnellate di librerie JS che ingombrano le cose.

Mi piacerebbe vedere un esempio semplice e funzionante in cui il server invia un messaggio al client ogni 10 secondi, dicendo che ore sono, e il client scrive quei dati sulla pagina o lancia un avviso, qualcosa di molto semplice. Quindi posso capire le cose da lì, aggiungere cose di cui ho bisogno 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'è di sbagliato nel primo esempio in ( socket.io/#how-to-use )? Mi sembra abbastanza semplice ...
maerics

1
Ciao, è un po 'tardi ma chiunque in futuro può trovare un buon tutorial qui sull'uso di socketio con nodejs. programmerblog.net/using-socketio-with-nodejs
Jason W

Risposte:


154

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

Solo perché oggi mi sento bene:

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

Grazie mille, funziona ovviamente e, cosa più importante, sto iniziando a capire come funziona. Molto gentile da parte tua a scrivere questo, onestamente ho passato almeno 3 o 4 ore cercando di far funzionare tutto, per quanto triste sia ahah. Grazie mille Linus!
Cocorico

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

1
@ Boris potresti avere questo problema se aprissi il file index.html in locale. Se l'hai fatto, sostituisci i tag script con src = "http: //. Se stai ospitando su un server web, apri la console javascript e prova a identificare cosa non funziona.
CodeMonkeyKing

4
inizialmente ottengo "io non definito" - l'ho usato invece <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > e ora funziona
Alexander Mills

Dovresti eseguire "npm init" e quindi installare il socket io tramite npm "npm install socket.io --save"
Farid Movsumov

31

Ecco la mia sottomissione!

se metti questo codice in un file chiamato hello.js e lo esegui usando il nodo hello.js dovrebbe stampare il messaggio hello, è stato inviato attraverso 2 socket.

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

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


Penso che questa dovrebbe essere la soluzione accettata. Almeno mi ha aiutato.
Daft Fox

21

Forse questo potrebbe aiutare anche te. Avevo qualche problema ad avvolgere la testa su come funzionava socket.io, quindi ho provato a riassumere un esempio il più possibile.

Ho adattato questo esempio dall'esempio pubblicato qui: http://socket.io/get-started/chat/

Per prima cosa, inizia in una directory vuota e crea un file molto semplice chiamato package.json Inserisci quanto segue.

{
"dependencies": {}
}

Successivamente, sulla riga di comando, usa npm per installare le dipendenze di cui abbiamo bisogno per questo esempio

$ npm install --save express socket.io

Questo potrebbe richiedere alcuni minuti a seconda della velocità della tua connessione di rete / CPU / ecc. Per verificare che tutto sia andato come previsto, puoi guardare di nuovo il file package.json .

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

Crea un file chiamato server.js Questo sarà ovviamente il nostro server gestito da nodo. Inserisci 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);

Crea l'ultimo file chiamato index.html e inserisci il codice seguente.

<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 puoi testare questo esempio molto semplice e vedere un output simile al seguente:

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

Se apri un browser web e lo punti al nome host su cui stai eseguendo il processo del nodo, dovresti vedere gli stessi numeri apparire nel tuo browser, insieme a qualsiasi altro browser connesso che guarda la stessa pagina.


10

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

ogni semplice esempio socket.io che ho trovato coinvolto in 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 più piccolo in assoluto che potrei trovare.

questo restituisce solo una stringa passata dalla console in MAIUSCOLO.

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>

correre:

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

usa qualcosa come questo test della porta per assicurarti che la tua porta sia aperta.

ora vai su http: //localhost/index.html e usa la console del browser per inviare i messaggi al server.

nella migliore delle ipotesi, quando si utilizza http.createServer, cambia le seguenti due righe per te:

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

Spero che questo esempio molto semplice risparmi ai miei compagni neofiti alcune difficoltà. e si prega di notare che ho evitato di usare "parola riservata" cercando nomi di variabili definiti dall'utente per le mie definizioni di socket.


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 webpagemhm si ... var app = http.createServer(- wut
Don Cheadle

1
Molto molto utile, mi hai salvato la giornata. Molte grazie. Questa è la risposta più semplice senza caricare troppo in node.js, questo esempio è meglio per tutti i principianti per iniziare e acquisire familiarità con node. Ancora una volta grazie
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);
});

Ed esegui questi comandi per eseguire l'applicazione.

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

e apri l'URL: - La http://127.0.0.1:3000/porta potrebbe essere diversa. e vedrai questo OUTPUT

inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.