web-dev-qa-db-fra.com

Qu'est-ce qu'un exemple de Socket.io le plus simple possible?

Donc, j'ai essayé de comprendre Socket.io ces derniers temps, mais je ne suis pas un programmeur génial, et presque tous les exemples que je peux trouver sur le Web (croyez-moi, j'ai cherché pendant des heures et des heures), comportent des éléments supplémentaires qui compliquent les choses. Beaucoup d'exemples font un tas de choses qui me déroutent, ou se connectent à une base de données étrange, ou utilisent coffeescript ou des tonnes de bibliothèques JS qui encombrent les choses.

J'adorerais voir un exemple fonctionnel simple dans lequel le serveur envoie simplement un message au client toutes les 10 secondes, en indiquant l'heure exacte, et le client écrit ces données sur la page ou génère une alerte, quelque chose de très simple. Ensuite, je peux comprendre des choses à partir de là, ajouter des choses dont j'ai besoin comme des connexions à une base de données, etc. Et oui, j'ai vérifié les exemples sur le site socket.io et ils ne fonctionnent pas pour moi, et je ne comprends pas ce qu'ils font .

node.jssocket.io
105
Cocorico

Edit: Je pense qu'il est préférable que quiconque consulte l'excellente exemple de chat sur la page de démarrage de Socket.IO. L'API a été assez simplifiée depuis que j'ai fourni cette réponse. Ceci étant dit, voici la réponse originale mise à jour petit à petit pour la nouvelle API.

Juste parce que je me sens bien aujourd'hui:

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);
145
Linus Gustav Larsson Thiel

Voici ma soumission!

si vous placez ce code dans un fichier nommé hello.js et que vous l'exécutez à l'aide du noeud hello.js, il devrait afficher le message hello, il a été envoyé via 2 sockets.

Le code montre comment gérer les variables d’un message hello renvoyé du client au serveur via la section de code // Miroir.

Les noms de variable sont déclarés localement plutôt que tous en haut car ils ne sont utilisés que dans chacune des sections entre les commentaires. Chacun de ceux-ci pourrait être dans un fichier séparé et être exécuté comme son propre noeud.

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

Peut-être que cela peut vous aider aussi. J'avais du mal à comprendre comment fonctionne socket.io et j'ai donc essayé de résumer un exemple autant que possible.

J'ai adapté cet exemple à partir de l'exemple posté ici: http://socket.io/get-started/chat/

Commencez par démarrer dans un répertoire vide et créez un fichier très simple appelé package.json . Placez-y les éléments suivants.

{
"dependencies": {}
}

Ensuite, sur la ligne de commande, utilisez npm pour installer les dépendances nécessaires à cet exemple.

$ npm install --save express socket.io

Cela peut prendre quelques minutes en fonction de la vitesse de votre connexion réseau/CPU/etc. Pour vérifier que tout s'est déroulé comme prévu, vous pouvez consulter le package package.json fichier à nouveau.

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

Créez un fichier appelé server.js Ce sera évidemment notre serveur géré par noeud. Placez le code suivant dans celui-ci:

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

Créez le dernier fichier appelé index.html et placez-y le code suivant.

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

Vous pouvez maintenant tester cet exemple très simple et voir des résultats similaires à ceux-ci:

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

Si vous ouvrez un navigateur Web et que vous le dirigez vers le nom d'hôte sur lequel vous exécutez le processus de nœud, vous devriez voir les mêmes numéros apparaître dans votre navigateur, ainsi que tout autre navigateur connecté regardant la même page.

18
ray_voelker

je me rends compte que cet article a plusieurs années maintenant, mais parfois, les débutants certifiés comme moi ont besoin d'un exemple concret totalement dépouillé à la forme la plus simple.

chaque exemple simple socket.io je pourrais trouver impliqué http.createServer (). mais que se passe-t-il si vous souhaitez inclure un peu de magie socket.io dans une page Web existante? Voici l'exemple le plus simple et le plus simple que je pourrais trouver.

cela ne fait que renvoyer une chaîne passée depuis la console UPPERCASED.

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>

courir:

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

utilisez quelque chose comme ceci test du port pour vous assurer que votre port est ouvert.

naviguez maintenant jusqu'à http: //localhost/index.html et utilisez la console de votre navigateur pour envoyer des messages au serveur.

au mieux, en utilisant http.createServer, il modifie les deux lignes suivantes pour vous:

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

j'espère que cet exemple très simple épargnera à certains débutants quelques difficultés. et notez que je suis resté à l'écart de l'utilisation de "Word réservé" à la recherche de noms de variables définis par l'utilisateur pour les définitions de socket.

10
edwardsmarkf