Qual é um exemplo do exemplo Socket.io mais simples possível?


113

Então, tenho tentado entender Socket.io ultimamente, mas não sou um grande programador, e quase todos os exemplos que posso encontrar na web (acredite, eu tenho procurado por horas e horas), tem coisas extras que complicam as coisas. Muitos dos exemplos fazem um monte de coisas que me confundem, ou se conectam a algum banco de dados estranho, ou usam coffeescript ou toneladas de bibliotecas JS que bagunçam as coisas.

Adoraria ver um exemplo básico e funcional em que o servidor apenas envia uma mensagem ao cliente a cada 10 segundos, dizendo que horas são, e o cliente grava esses dados na página ou emite um alerta, algo muito simples. Então posso descobrir as coisas a partir daí, adicionar coisas que preciso, como conexões db, etc. E sim, eu verifiquei os exemplos no site socket.io e eles não funcionam para mim, e não entendo o que fazem .


4
O que há de errado com o primeiro exemplo em ( socket.io/#how-to-use )? Parece bastante simples para mim ...
— maerics

1
Oi, é um pouco tarde, mas qualquer pessoa no futuro pode encontrar um bom tutorial aqui sobre como usar socketio com nodejs. programmerblog.net/using-socketio-with-nodejs
— Jason W

Respostas:


154

Edit: Acho que é melhor para qualquer pessoa consultar o excelente exemplo de bate-papo na página de primeiros passos do Socket.IO. A API foi bastante simplificada desde que forneci esta resposta. Dito isso, aqui está a resposta original atualizada pequeno-pequeno para a API mais recente.

Só porque me sinto bem hoje:

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

Muito obrigado, isso funciona, é claro e, mais importante, estou começando a entender como isso funciona. Muito gentil de sua parte escrever isso, eu honestamente passei pelo menos 3 ou 4 horas tentando fazer tudo funcionar, por mais triste que isso seja haha. Muito obrigado Linus!
— Cocorico

Isso não funciona para mim. No navegador, recebo uma página em branco. No lado do servidor, não há saídas exceto "cliente autorizado" e "handshake autorizado".
— Boris

1
@Boris, você pode ter esse problema se abrir o arquivo index.html local. Em caso afirmativo, substitua as tags de script por src = "http: //. Se você estiver hospedando em um servidor web, abra o console javascript e tente identificar o que está falhando.
— CodeMonkeyKing

4
inicialmente recebo 'io não definido' - usei isso <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > e agora funciona
— Alexander Mills

Você deve executar "npm init" e então instalar o socket io via npm "npm install socket.io --save"
— Farid Movsumov

31

Aqui está a minha apresentação!

se você colocar este código em um arquivo chamado hello.js e executá-lo usando o node hello.js, ele deverá imprimir a mensagem hello, ela foi enviada por 2 soquetes.

O código mostra como lidar com as variáveis ​​de uma mensagem de olá devolvida do cliente para o servidor por meio da seção de código rotulada // Mirror.

Os nomes das variáveis ​​são declarados localmente, em vez de todos no topo, porque eles são usados ​​apenas em cada uma das seções entre os comentários. Cada um deles pode estar em um arquivo separado e ser executado como seu próprio nó.

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


Acho que essa deve ser a solução aceita. Me ajudou pelo menos.
— Daft Fox,

21

Talvez isso possa ajudá-lo também. Eu estava tendo problemas para entender como soquete.io funcionava, então tentei resumir um exemplo o máximo que pude.

Adaptei este exemplo do exemplo postado aqui: http://socket.io/get-started/chat/

Primeiro, comece em um diretório vazio e crie um arquivo muito simples chamado package.json. Coloque o seguinte nele.

{
"dependencies": {}
}

Em seguida, na linha de comando, use npm para instalar as dependências de que precisamos para este exemplo

$ npm install --save express socket.io

Isso pode levar alguns minutos, dependendo da velocidade de sua conexão de rede / CPU / etc. Para verificar se tudo correu conforme planejado, você pode examinar o arquivo package.json novamente.

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

Crie um arquivo chamado server.js Este será obviamente o nosso servidor executado por nó. Coloque o seguinte código nele:

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

Crie o último arquivo chamado index.html e coloque o seguinte código nele.

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

Agora você pode testar este exemplo muito simples e ver alguma saída semelhante a esta:

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

Se você abrir um navegador da web e apontar para o nome do host no qual está executando o processo de nó, deverá ver os mesmos números aparecerem em seu navegador, junto com qualquer outro navegador conectado olhando para a mesma página.


10

Sei que este post já tem vários anos, mas às vezes iniciantes certificados como eu precisam de um exemplo funcional que seja totalmente reduzido à forma mais simples.

cada exemplo simples de socket.io que pude encontrar envolvido http.createServer (). mas e se você quiser incluir um pouco da magia do socket.io em uma página da web existente? aqui está o exemplo mais fácil e menor que eu poderia sugerir.

isso apenas retorna uma string passada do console em MAIÚSCULAS.

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>

para correr:

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

use algo como este teste de porta para garantir que sua porta está aberta.

agora navegue até http: //localhost/index.html e use o console do seu navegador para enviar mensagens de volta ao servidor.

na melhor das hipóteses, ao usar http.createServer, ele altera as duas linhas a seguir para você:

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

Espero que este exemplo muito simples poupe meus colegas novatos de algumas dificuldades. e observe que evitei usar "palavras reservadas" para nomes de variáveis ​​definidas pelo usuário para minhas definições de soquete.


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 webpagemhm sim ... var app = http.createServer(- wut
— Don Cheadle

1
Muito, muito útil, você salvou meu dia. Muito obrigado. Esta é a resposta mais simples sem carregar muito no node.js, este exemplo é melhor para todos os iniciantes começarem e se familiarizarem com o node. Mais uma vez, obrigado
— 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);
});

E execute esses comandos para executar o aplicativo.

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

e abra o URL: - A http://127.0.0.1:3000/porta pode ser diferente. e você verá este OUTPUT

insira a descrição da imagem aqui

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.