Jaki jest przykład najprostszego możliwego przykładu Socket.io?

113

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

node.js socket.io Cocorico
źródło
4
Co jest nie tak z pierwszym przykładem w ( socket.io/#how-to-use )? Wydaje mi się to dość proste ...
maerics
1
Cześć, jest trochę za późno, ale w przyszłości każdy może znaleźć dobry samouczek dotyczący używania socketio z nodejs. programmerblog.net/using-socketio-with-nodejs
Jason W

Odpowiedzi:

154

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);
Linus Thiel
źródło
Wielkie dzięki, to oczywiście działa, a co ważniejsze, zaczynam rozumieć, jak to działa. Bardzo miło z twojej strony, że to piszesz, naprawdę spędziłem co najmniej 3 lub 4 godziny, próbując doprowadzić to wszystko do pracy, tak smutne, jak to jest haha. Wielkie dzięki Linus!
Cocorico
To nie działa na mnie. W przeglądarce pojawia się pusta strona. Po stronie serwera nie ma wyjść poza „autoryzacją klienta” i „autoryzacją uzgadniania”.
Boris,
1
@Boris, możesz mieć ten problem, jeśli otworzyłeś plik index.html lokalny. Jeśli tak, zamień tagi skryptu na src = "http: //. Jeśli
hostujesz
4
początkowo otrzymuję „io nie zdefiniowano” - zamiast tego użyłem tego <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > i teraz to działa
Alexander Mills,
Powinieneś uruchomić "npm init", a następnie zainstalować gniazdo io przez npm "npm install socket.io --save"
Farid Movsumov
31

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);
Rozwiń fragment

błąd
źródło
Myślę, że powinno to być przyjęte rozwiązanie. Przynajmniej mi pomógł.
Daft Fox
21

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

ray_voelker
źródło
10

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

edwardsmarkf
źródło
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 tak ... var app = http.createServer(- wut
Don Cheadle
1
Bardzo, bardzo przydatne, uratowałeś mi dzień. Wielkie dzięki. To jest najprostsza odpowiedź bez zbytniego ładowania w node.js, ten przykład jest lepszy dla wszystkich początkujących, aby rozpocząć i zaznajomić się z node. Jeszcze raz dziękuję
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);
});

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

wprowadź opis obrazu tutaj

Vishal Thakur
źródło