Tak więc ostatnio próbowałem zrozumieć Socket.io, ale nie jestem superprogramistą i prawie każdy przykład, który mogę znaleźć w sieci (wierz mi, szukałem przez wiele godzin), ma dodatkowe rzeczy, które komplikują sprawę. Wiele przykładów robi wiele rzeczy, które mnie dezorientują, lub łączą się z jakąś dziwną bazą danych lub używają coffeescript lub ton bibliotek JS, które zagracają wszystko.

Chciałbym zobaczyć podstawowy, działający przykład, w którym serwer po prostu wysyła wiadomość do klienta co 10 sekund, mówiąc, która jest godzina, a klient zapisuje te dane na stronie lub generuje alert, coś bardzo prostego. Potem mogę stamtąd coś wymyślić, dodać rzeczy, których potrzebuję, takie jak połączenia db itp. I tak, sprawdziłem przykłady na stronie socket.io i nie działają one dla mnie i nie rozumiem, co robią .

Edycja: Uważam, że dla każdego lepiej jest zapoznać się z doskonałym przykładem czatu na stronie wprowadzającej do Socket.IO. API zostało dość uproszczone, odkąd podałem tę odpowiedź. Biorąc to pod uwagę, oto oryginalna odpowiedź zaktualizowana mała-mała dla nowszego interfejsu API.

Tylko dlatego, że czuję się dzisiaj dobrze:

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

Oto moje zgłoszenie!

jeśli umieścisz ten kod w pliku o nazwie hello.js i uruchomisz go za pomocą węzła hello.js, powinien wydrukować wiadomość hello, została wysłana przez 2 gniazda.

Kod pokazuje, jak obsługiwać zmienne wiadomości hello odsyłanej z klienta na serwer za pośrednictwem sekcji kodu oznaczonej // Mirror.

Nazwy zmiennych są deklarowane lokalnie, a nie wszystkie u góry, ponieważ są używane tylko w każdej sekcji między komentarzami. Każdy z nich może znajdować się w osobnym pliku i działać jako własny węzeł.

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

Może to też może ci pomóc. Miałem problemy z owinięciem głowy wokół tego, jak działa socket.io, więc starałem się ugotować przykład tak bardzo, jak tylko mogłem.

Zaadaptowałem ten przykład z przykładu zamieszczonego tutaj: http://socket.io/get-started/chat/

Najpierw zacznij od pustego katalogu i utwórz bardzo prosty plik o nazwie package.json Umieść w nim następujące elementy.

{
"dependencies": {}
}

Następnie w wierszu poleceń użyj npm, aby zainstalować zależności, których potrzebujemy w tym przykładzie

$ npm install --save express socket.io

Może to zająć kilka minut, w zależności od szybkości połączenia sieciowego / procesora / itp. Aby sprawdzić, czy wszystko poszło zgodnie z planem, możesz ponownie spojrzeć na plik package.json .

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

Utwórz plik o nazwie server.js Będzie to oczywiście nasz serwer obsługiwany przez węzeł. Umieść w nim następujący kod:

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

Utwórz ostatni plik o nazwie index.html i umieść w nim następujący kod.

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

Możesz teraz przetestować ten bardzo prosty przykład i zobaczyć wyniki podobne do następujących:

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

Jeśli otworzysz przeglądarkę internetową i wskażesz ją na nazwę hosta, na którym uruchamiasz proces węzła, w przeglądarce powinny pojawić się te same liczby, wraz z każdą inną podłączoną przeglądarką przeglądającą tę samą stronę.

zdaję sobie sprawę, że ten post ma już kilka lat, ale czasami certyfikowani nowicjusze, tacy jak ja, potrzebują praktycznego przykładu, który jest całkowicie okrojony do absolutnie najprostszej formy.

każdy prosty przykład socket.io, jaki mogłem znaleźć, dotyczył http.createServer (). ale co, jeśli chcesz dołączyć odrobinę magii socket.io na istniejącej stronie internetowej? oto absolutnie najłatwiejszy i najmniejszy przykład, jaki mogłem wymyślić.

to po prostu zwraca ciąg przekazany z konsoli WIELKIMI LITERAMI.

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>

biegać:

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

użyj czegoś takiego jak ten test portu, aby upewnić się, że port jest otwarty.

teraz przejdź do http: //localhost/index.html i użyj konsoli przeglądarki do wysyłania wiadomości z powrotem na serwer.

w najlepszym przypadku, gdy używasz http.createServer, zmienia dla ciebie następujące dwie linie:

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

Mam nadzieję, że ten bardzo prosty przykład oszczędzi moim kolegom trochę zmagań. i proszę zauważyć, że trzymałem się z daleka od używania w definicjach gniazd nazw zmiennych wyglądających na „zastrzeżone słowo”.

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

I uruchomić te polecenia do uruchomienia aplikacji.

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

i otwórz adres URL: - http://127.0.0.1:3000/Port może być inny. i zobaczysz to WYJŚCIE