113

Donc, j'ai essayé de comprendre Socket.io ces derniers temps, mais je ne suis pas un super programmeur, et presque tous les exemples que je peux trouver sur le Web (croyez-moi, j'ai cherché pendant des heures et des heures), ont des choses 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'aimerais voir un exemple basique et fonctionnel où le serveur envoie simplement un message au client toutes les 10 secondes, indiquant l'heure qu'il est, et le client écrit ces données sur la page ou lance une alerte, quelque chose de très simple. Ensuite, je peux comprendre les choses à partir de là, ajouter des éléments dont j'ai besoin comme des connexions db, 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.js socket.io Cocorico
la source

4

Quel est le problème avec le premier exemple à ( socket.io/#how-to-use )?

Cela

1

Salut, c'est un peu tard mais n'importe qui à l'avenir peut trouver ici un bon tutoriel sur l'utilisation de socketio avec nodejs. programmerblog.net/using-socketio-with-nodejs

Jason W

154

Edit: Je pense qu'il vaut mieux que quiconque consulte l'excellent 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. Cela é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);

Linus Thiel
la source

Merci beaucoup, cela fonctionne bien sûr, et plus important encore, je commence à comprendre comment cela fonctionne. Très gentil à vous d'écrire ceci, j'ai honnêtement passé au moins 3 ou 4 heures à essayer de faire fonctionner tout cela, aussi triste que cela soit haha. Merci beaucoup Linus!

Cocorico

Cela ne fonctionne pas pour moi. Dans le navigateur, j'obtiens une page vierge. Du côté serveur, il n'y a pas de sorties sauf "client autorisé" et "handshake autorisé".

Boris

1

@Boris vous pourriez avoir ce problème si vous avez ouvert le fichier index.html local. Si vous l'avez fait, remplacez les balises de script par src = "http: //. Si vous hébergez sur un serveur Web, ouvrez la console JavaScript et essayez d'identifier ce qui échoue.

CodeMonkeyKing

4

au départ, j'obtiens 'io non défini' - j'ai utilisé ceci à la place <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > et maintenant cela fonctionne

Alexander Mills

Vous devez exécuter "npm init", puis installer socket io via npm "npm install socket.io --save"

Farid Movsumov

31

Voici ma soumission!

si vous mettez ce code dans un fichier appelé hello.js et que vous l'exécutez en utilisant le nœud hello.js, il devrait afficher le message bonjour, il a été envoyé via 2 sockets.

Le code montre comment gérer les variables pour un message Hello renvoyé du client vers le serveur via la section de code intitulée // Mirror.

Les noms de variables 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 ces éléments peut se trouver dans un fichier séparé et s'exécuter comme son propre nœud.

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

Développer l'extrait

Erreur
la source

Je pense que cela devrait être la solution acceptée. Au moins m'a aidé.

Daft Fox

21

Peut-être que cela peut aussi vous aider. J'avais du mal à comprendre le fonctionnement de socket.io, alors j'ai 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 dont nous avons besoin pour cet exemple

$ npm install --save express socket.io

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

$ 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 nœud. Placez-y le code suivant:

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 une sortie similaire à la suivante:

$ 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 pointez 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 cette même page.

ray_voelker
la source

10

Je me rends compte que ce poste a maintenant plusieurs années, mais parfois les débutants certifiés comme moi ont besoin d'un exemple de travail totalement dépouillé à la forme la plus simple.

chaque exemple simple de socket.io que je pourrais trouver impliqué http.createServer (). mais que faire si vous souhaitez inclure un peu de magie socket.io dans une page Web existante? voici l'exemple le plus simple et le plus petit que je puisse trouver.

cela renvoie simplement une chaîne passée de 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 ce test de port pour vous assurer que votre port est ouvert.

maintenant, accédez à http: //localhost/index.html et utilisez la console de votre navigateur pour renvoyer les messages au serveur.

au mieux, lorsque vous utilisez 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 à mes collègues débutants des difficultés. et notez que je suis resté loin d'utiliser des noms de variables définis par l'utilisateur pour mes définitions de socket.

edwardsmarkf
la source

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 yes ... var app = http.createServer(- wut

Don Cheadle

1

Très très utile, vous avez sauvé ma journée. Merci beaucoup. C'est la réponse la plus simple sans charger trop dans le node.js, cet exemple est préférable pour tous les débutants de démarrer et de se familiariser avec node. Encore une fois merci

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

Et exécutez ces commandes pour exécuter l'application.

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

et ouvrez l'URL: - Le http://127.0.0.1:3000/port peut être différent. et vous verrez cette sortie

Vishal Thakur
la source

Quel est un exemple de l'exemple le plus simple possible de Socket.io?

Réponses:

index.html

app.js