113

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 .

node.js socket.io Cocorico
quelle

4

Was ist los mit dem ersten Beispiel unter ( socket.io/#how-to-use )? Scheint mir einfach genug ...

Maerics

1

Hallo, es ist etwas spät, aber jeder in Zukunft kann hier ein gutes Tutorial finden, wie man socketio mit nodejs verwendet. programmerblog.net/using-socketio-with-nodejs

Jason W

154

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

Linus Thiel
quelle

Vielen Dank, das funktioniert natürlich, und was noch wichtiger ist, ich fange an zu verstehen, wie das funktioniert. Sehr nett von Ihnen, dies zu schreiben, ich habe ehrlich gesagt mindestens 3 oder 4 Stunden damit verbracht, alles zum Laufen zu bringen, so traurig das auch ist, haha. Vielen Dank Linus!

Cocorico

Das funktioniert bei mir nicht. Im Browser bekomme ich eine leere Seite. Auf der Serverseite gibt es keine Ausgänge außer "Client autorisiert" und "Handshake autorisiert".

Boris

1

@Boris Möglicherweise tritt dieses Problem auf, wenn Sie die Datei index.html local geöffnet haben. Wenn Sie dies getan haben, ersetzen Sie die Skript-Tags durch src = "http: //. Wenn Sie auf einem Webserver hosten, öffnen Sie die Javascript-Konsole und versuchen Sie festzustellen, was fehlschlägt.

CodeMonkeyKing

4

anfangs bekomme ich 'io not defined' - ich habe dies stattdessen verwendet <script src = " cdn.socket.io/socket.io-1.2.1.js " > </ script > und jetzt funktioniert es

Alexander Mills

Sie sollten "npm init" ausführen und dann Socket io über npm "npm install socket.io --save"

Farid Movsumov

31

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

Erweitern Sie das Snippet

Error
quelle

Ich denke, dies sollte die akzeptierte Lösung sein. Hat mir zumindest geholfen.

Daft Fox

21

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.

ray_voelker
quelle

10

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.

edwardsmarkf
quelle

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 webpage

mhm ja ... var app = http.createServer(- wut

Don Cheadle

1

Sehr sehr nützlich, du hast meinen Tag gerettet. Vielen Dank. Dies ist die einfachste Antwort, ohne zu viel in die Datei node.js zu laden. Dieses Beispiel ist besser für alle Anfänger, um den Startschuss zu geben und sich mit dem Knoten vertraut zu machen. Nochmals vielen Dank

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

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

Vishal Thakur
quelle

Was ist ein Beispiel für das einfachste Beispiel von Socket.io?

Antworten:

index.html

app.js.