it-swarm.com.de

Was ist ein Beispiel für das einfachste mögliche Socket.io-Beispiel?

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 tun eine Menge Dinge, die mich verwirren oder eine Verbindung zu einer seltsamen Datenbank herstellen, 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 alle 10 Sekunden eine Nachricht an den Client sendet, in der die Uhrzeit angegeben ist, und der Client diese Daten auf die Seite schreibt oder eine Warnung ausgibt, was sehr einfach ist. Dann kann ich Dinge herausfinden, Dinge hinzufügen, die ich brauche, wie z. B. Datenbankverbindungen usw. Und ja, ich habe die Beispiele auf der socket.io-Site überprüft, und sie funktionieren nicht für mich und ich verstehe nicht, was sie tun .

105
Cocorico

Edit: Ich finde, es ist besser für jeden, das ausgezeichnete Chat-Beispiel auf der Einstiegsseite von Socket.IO zu konsultieren. Die API wurde stark vereinfacht, seit ich diese Antwort gegeben habe. Abgesehen davon 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 sie unter Verwendung des Knotens "hello.js" ausführen, sollte die Nachricht "hello" gedruckt werden. Sie wurde über zwei Sockets gesendet.

Der Code zeigt, wie die Variablen für eine vom Client an den Server zurückgesendete Hallo-Nachricht über den Codeabschnitt // Mirror behandelt werden.

Die Variablennamen werden eher lokal als alle oben deklariert, da sie nur in den Abschnitten 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);
27
error

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 gut ich konnte aufzuschreiben.

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.

{
"dependencies": {}
}

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

$ npm install --save express socket.io

Dies kann je nach Geschwindigkeit Ihrer Netzwerkverbindung/CPU/usw. einige Minuten dauern. Um zu überprüfen, ob alles wie geplant gelaufen ist, können Sie die Datei package.json erneut aufrufen.

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

Erstellen Sie eine Datei mit dem Namen server.js Dies wird natürlich unser Server sein, der von einem 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 sehen, die der folgenden ähnelt:

$ 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 Zahlen angezeigt werden wie in allen anderen verbundenen Browsern, die dieselbe Seite anzeigen.

18
ray_voelker

ich stelle fest, dass dieser Beitrag bereits einige Jahre alt ist, aber manchmal benötigen zertifizierte Neulinge wie ich ein Arbeitsbeispiel, das auf die absolut einfachste Form reduziert ist.

jedes einfache socket.io Beispiel, das ich finden konnte, bezog http.createServer () mit ein. aber was ist, wenn Sie ein bisschen Socket.io-Magie in eine vorhandene Webseite einbinden möchten? Hier ist das absolut einfachste und kleinste Beispiel, das ich finden konnte.

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>

zu rennen:

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

verwenden Sie etwas wie dieses Porttest , um sicherzustellen, dass Ihr Port offen ist.

navigieren Sie nun zu http: //localhost/index.html und senden Sie über Ihre Browserkonsole Nachrichten an den Server zurück.

im besten Fall werden bei Verwendung von http.createServer 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 Schwierigkeiten. und bitte beachten Sie, dass ich mich von der Verwendung von "reserviertem Word" fernhielt, das benutzerdefinierte Variablennamen für meine Socket-Definitionen sucht.

10
edwardsmarkf