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 .

node.js socket.io Cocorico
fonte

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

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

Linus Thiel
fonte

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

Expandir trecho

erro
fonte

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.

ray_voelker
fonte

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.

edwardsmarkf
fonte

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

Vishal Thakur
fonte

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

Respostas:

index.html

app.js