Ich habe in letzter Zeit versucht, Socket.io zu verstehen, aber ich bin kein großartiger Programmierer, und fast jedes Beispiel, das ich im Internet finden kann (glauben Sie mir, ich habe stundenlang gesucht), enthält zusätzliche Dinge, die die Dinge komplizieren. Viele der Beispiele machen eine Reihe von Dingen, die mich verwirren, oder stellen eine Verbindung zu einer seltsamen Datenbank her oder verwenden Coffeescript oder Tonnen von JS-Bibliotheken, die die Dinge durcheinander bringen.

Ich würde gerne ein einfaches, funktionierendes Beispiel sehen, bei dem der Server nur alle 10 Sekunden eine Nachricht an den Client sendet und angibt, wie spät es ist, und der Client diese Daten auf die Seite schreibt oder eine Warnung auslöst, was sehr einfach ist. Dann kann ich von dort aus Dinge herausfinden, Dinge hinzufügen, die ich brauche, wie z. B. Datenbankverbindungen usw. Und ja, ich habe die Beispiele auf der Website socket.io überprüft und sie funktionieren nicht für mich und ich verstehe nicht, was sie tun .

Bearbeiten: Ich denke, es ist besser für jeden, das hervorragende Chat-Beispiel auf der Socket.IO-Startseite zu konsultieren . Die API wurde ziemlich vereinfacht, seit ich diese Antwort gegeben habe. Davon abgesehen ist hier die ursprüngliche Antwort, die für die neuere API klein-klein aktualisiert wurde.

Nur weil ich mich heute gut fühle:

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

Hier ist meine Vorlage!

Wenn Sie diesen Code in eine Datei mit dem Namen hello.js einfügen und ihn mit dem Knoten hello.js ausführen, sollte die Nachricht hallo ausgedruckt werden. Sie wurde über zwei Sockets gesendet.

Der Code zeigt, wie die Variablen für eine Hallo-Nachricht behandelt werden, die vom Client an den Server über den Codeabschnitt mit der Bezeichnung // Spiegeln gesendet wird.

Die Variablennamen werden lokal und nicht alle oben deklariert, da sie nur in jedem der Abschnitte zwischen den Kommentaren verwendet werden. Jedes dieser Elemente kann sich in einer separaten Datei befinden und als eigener Knoten ausgeführt werden.

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

Vielleicht hilft Ihnen das auch. Ich hatte einige Probleme damit, meinen Kopf um die Funktionsweise von socket.io zu wickeln, also versuchte ich, ein Beispiel so weit wie möglich zu reduzieren.

Ich habe dieses Beispiel aus dem hier veröffentlichten Beispiel angepasst: http://socket.io/get-started/chat/

Beginnen Sie zunächst in einem leeren Verzeichnis und erstellen Sie eine sehr einfache Datei mit dem Namen package.json . Fügen Sie Folgendes ein.

{
"dependencies": {}
}

Verwenden Sie als Nächstes in der Befehlszeile npm, um die für dieses Beispiel erforderlichen Abhängigkeiten zu installieren

$ npm install --save express socket.io

Dies kann abhängig von der Geschwindigkeit Ihrer Netzwerkverbindung / CPU / usw. einige Minuten dauern. Um zu überprüfen, ob alles wie geplant verlaufen ist, können Sie die Datei package.json erneut anzeigen .

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

Erstellen Sie eine Datei mit dem Namen server.js. Dies ist offensichtlich unser Server, der vom Knoten ausgeführt wird. Fügen Sie den folgenden Code ein:

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

Erstellen Sie die letzte Datei mit dem Namen index.html und fügen Sie den folgenden Code ein.

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

Sie können dieses sehr einfache Beispiel jetzt testen und eine Ausgabe ähnlich der folgenden sehen:

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

Wenn Sie einen Webbrowser öffnen und auf den Hostnamen verweisen, auf dem Sie den Knotenprozess ausführen, sollten in Ihrem Browser dieselben Nummern angezeigt werden, zusammen mit allen anderen verbundenen Browsern, die dieselbe Seite anzeigen.

Mir ist klar, dass dieser Beitrag jetzt mehrere Jahre alt ist, aber manchmal brauchen zertifizierte Neulinge wie ich ein funktionierendes Beispiel, das auf die absolut einfachste Form reduziert ist.

Jedes einfache Beispiel für socket.io, das ich finden konnte, war http.createServer (). aber was ist, wenn Sie ein bisschen socket.io Magie in eine vorhandene Webseite aufnehmen möchten? Hier ist das absolut einfachste und kleinste Beispiel, das ich finden könnte.

Dies gibt nur eine Zeichenfolge zurück, die von der Konsole UPPERCASED übergeben wurde.

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>

laufen:

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

Verwenden Sie so etwas wie diesen Port-Test, um sicherzustellen, dass Ihr Port offen ist.

Navigieren Sie jetzt zu http: //localhost/index.html und verwenden Sie Ihre Browserkonsole, um Nachrichten an den Server zurückzusenden.

Wenn Sie http.createServer verwenden, werden bestenfalls die folgenden zwei Zeilen für Sie geändert:

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

Ich hoffe, dieses sehr einfache Beispiel erspart meinen Neulingen einige Probleme. und bitte beachten Sie, dass ich mich von der Verwendung von "reservierten Wörtern" ferngehalten habe, die benutzerdefinierte Variablennamen für meine Socket-Definitionen suchen.

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

Und führen Sie diese Befehle für die Anwendung auszuführen.

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

und öffnen Sie die URL: - http://127.0.0.1:3000/Port kann unterschiedlich sein. und Sie werden diesen AUSGANG sehen