Olası en basit Socket.io örneğinin bir örneği nedir?


113

Socket.io'yu son zamanlarda anlamaya çalışıyorum ama süper bir programcı değilim ve internette bulabildiğim hemen hemen her örnekte (inanın bana saatlerce baktım), işleri zorlaştıran fazladan şeyler var. Bir çok örnek kafamı karıştıran veya garip bir veritabanına bağlanan veya bir şeyleri karıştıran kahve dosyası veya tonlarca JS kitaplığı kullanan bir sürü şey yapıyor.

Sunucunun istemciye her 10 saniyede bir mesaj gönderdiği, saatin kaç olduğunu söyleyen ve istemcinin bu verileri sayfaya yazdığı veya bir uyarı attığı, çok basit bir şekilde basit, işleyen bir örnek görmeyi çok isterim. Sonra oradan bir şeyler çözebilirim, ihtiyacım olan şeyleri ekleyebilirim, örneğin db bağlantıları, vb. Ve evet socket.io sitesindeki örnekleri kontrol ettim ve benim için çalışmıyorlar ve ne yaptıklarını anlamıyorum .


4
( Socket.io/#how-to-use ) adresindeki ilk örnekte ne sorun var ? Bana yeterince basit görünüyor ...
maerics

1
Merhaba, biraz geç ama gelecekte herkes socketio'yu nodejs ile kullanmak için burada iyi bir eğitim bulabilir. programmerblog.net/using-socketio-with-nodejs
Jason W

Yanıtlar:


154

Düzenleme: Herkesin Socket.IO başlangıç ​​sayfasındaki mükemmel sohbet örneğine başvurmasının daha iyi olacağını düşünüyorum . Bu cevabı verdiğimden beri API oldukça basitleştirildi. Bununla birlikte, yeni API için küçük-küçük güncellenen orijinal cevap burada.

Sırf bugün kendimi iyi hissettiğim için:

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

Çok teşekkürler, bu elbette çalışıyor ve daha da önemlisi, bunun nasıl çalıştığını anlamaya başlıyorum. Bunu yazdığınız için çok naziksiniz, dürüst olmak gerekirse, tüm bunları çalıştırmak için en az 3-4 saat harcadım, bu ne kadar üzücü olsa da haha. Çok teşekkürler Linus!
Cocorico

Bu benim için çalışmıyor. Tarayıcıda boş bir sayfa alıyorum. Sunucu tarafında, "istemci yetkilendirildi" ve "el sıkışma yetkisi" dışında hiçbir çıktı yoktur.
Boris

1
@Boris, index.html dosyasını yerel olarak açtıysanız bu sorunu yaşayabilirsiniz. Yaptıysanız, komut dosyası etiketlerini src = "http: // ile değiştirin. Bir web sunucusunda barındırıyorsanız, javascript konsolunu açın ve neyin başarısız olduğunu belirlemeye çalışın.
CodeMonkeyKing

4
başlangıçta 'io tanımlanmamış' mesajı alıyorum - bunun yerine bunu kullandım <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > ve şimdi çalışıyor
Alexander Mills

"Npm init" komutunu çalıştırmalı ve ardından npm "npm install socket.io --save" aracılığıyla socket io yüklemelisiniz
Farid Movsumov

31

İşte sunumum!

Bu kodu hello.js adlı bir dosyaya koyarsanız ve onu node hello.js kullanarak çalıştırırsanız, merhaba mesajını yazdırmalıdır, 2 soket üzerinden gönderilmiştir.

Kod, // Mirror etiketli kod bölümü aracılığıyla istemciden sunucuya geri dönen bir merhaba mesajı için değişkenlerin nasıl işleneceğini gösterir.

Değişken adları üstte değil yerel olarak bildirilir çünkü bunlar yalnızca yorumların arasındaki bölümlerin her birinde kullanılır. Bunların her biri ayrı bir dosyada olabilir ve kendi düğümü olarak çalıştırılabilir.

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


Bunun kabul edilen çözüm olması gerektiğini düşünüyorum. En azından bana yardımcı oldu.
Daft Fox

21

Belki bu da size yardımcı olabilir. Soket.io'nun nasıl çalıştığına kafamı sarmakta biraz güçlük çekiyordum, bu yüzden elimden geldiğince bir örnek oluşturmaya çalıştım.

Bu örneği burada yayınlanan örnekten uyarladım: http://socket.io/get-started/chat/

İlk önce boş bir dizinde başlayın ve package.json adında çok basit bir dosya oluşturun Aşağıdakileri içine yerleştirin.

{
"dependencies": {}
}

Ardından, komut satırında, bu örnek için ihtiyacımız olan bağımlılıkları yüklemek için npm kullanın

$ npm install --save express socket.io

Bu, ağ bağlantınızın / CPU / vb. Hızınıza bağlı olarak birkaç dakika sürebilir. Her şeyin planlandığı gibi gittiğini kontrol etmek için package.json dosyasına tekrar bakabilirsiniz .

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

Server.js adında bir dosya oluşturun Bu, açıkça düğüm tarafından çalıştırılan sunucumuz olacaktır. Aşağıdaki kodu içine yerleştirin:

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

Aranan son dosya oluşturun index.html ve aşağıdaki kodu içine yerleştirin.

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

Şimdi bu çok basit örneği test edebilir ve aşağıdakine benzer bazı çıktılar görebilirsiniz:

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

Bir web tarayıcısı açarsanız ve onu düğüm işlemini çalıştırdığınız ana bilgisayar adına yönlendirirseniz, aynı sayfaya bakan diğer bağlı tarayıcılarla birlikte tarayıcınızda aynı numaraların göründüğünü görmelisiniz.


10

Bu yazının şu anda birkaç yaşında olduğunun farkındayım, ancak bazen benim gibi sertifikalı yeni başlayanlar, tamamen en basit şekle indirgenmiş çalışan bir örneğe ihtiyaç duyuyor.

ilgili bulabildiğim her basit socket.io örneği http.createServer (). ama ya mevcut bir web sayfasına biraz socket.io sihri eklemek isterseniz? İşte bulabileceğim en kolay ve en küçük örnek.

bu sadece UPPERCASED konsoldan geçen bir dizge döndürür.

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>

koşmak:

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

bağlantı noktanızın açık olduğundan emin olmak için bu bağlantı noktası testi gibi bir şey kullanın .

şimdi http: //localhost/index.html adresine gidin ve iletileri sunucuya geri göndermek için tarayıcı konsolunuzu kullanın.

en iyi tahmin olarak, http.createServer kullanıldığında, sizin için aşağıdaki iki satırı değiştirir:

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

Umarım bu çok basit örnek, yeni başlayan arkadaşlarımın bazı mücadelelerinden kurtulur. ve lütfen soket tanımlarım için "ayrılmış sözcük" görünümlü kullanıcı tanımlı değişken adları kullanmaktan uzak durduğuma dikkat edin.


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

1
Çok Çok Yararlı, günümü kurtardın. Çok teşekkürler. Bu, node.js'de çok fazla yükleme yapılmadan verilen en basit cevaptır, bu örnek tüm yeni başlayanlar için başlangıç ​​yapmak ve düğümü tanımak için daha iyidir. Bir kez daha teşekkür ederim
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);
});

Ve uygulamayı çalıştırmak için bu komutları çalıştırın.

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

ve URL'yi açın: - http://127.0.0.1:3000/Bağlantı noktası farklı olabilir. ve bu ÇIKTI'yı göreceksiniz

görüntü açıklamasını buraya girin

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.