113

Jadi, saya telah mencoba untuk memahami Socket.io akhir-akhir ini, tetapi saya bukan programmer yang hebat, dan hampir setiap contoh yang dapat saya temukan di web (percayalah, saya telah mencari berjam-jam), memiliki hal-hal tambahan yang memperumit banyak hal. Banyak contoh melakukan banyak hal yang membingungkan saya, atau terhubung ke beberapa database aneh, atau menggunakan coffeescript atau banyak pustaka JS yang mengacaukan segalanya.

Saya ingin melihat contoh dasar yang berfungsi di mana server hanya mengirim pesan ke klien setiap 10 detik, mengatakan jam berapa sekarang, dan klien menulis data itu ke halaman atau mengeluarkan peringatan, sesuatu yang sangat sederhana. Kemudian saya dapat mencari tahu dari sana, menambahkan hal-hal yang saya butuhkan seperti koneksi db, dll. Dan ya, saya telah memeriksa contoh di situs socket.io dan mereka tidak bekerja untuk saya, dan saya tidak mengerti apa yang mereka lakukan .

node.js socket.io Cocorico
sumber

4

Apa yang salah dengan contoh pertama di ( socket.io/#how-to-use )? Tampaknya cukup sederhana bagi saya ...

maerics

1

Hai, ini agak terlambat tetapi siapa pun di masa mendatang dapat menemukan tutorial yang bagus di sini dalam menggunakan socketio dengan nodejs. programmerblog.net/using-socketio-with-nodejs

Jason W

154

Sunting: Saya merasa lebih baik bagi siapa pun untuk berkonsultasi dengan contoh obrolan yang sangat baik di halaman memulai Socket.IO. API telah cukup disederhanakan sejak saya memberikan jawaban ini. Karena itu, berikut adalah jawaban asli yang diperbarui kecil-kecil untuk API yang lebih baru.

Hanya karena saya merasa baik hari ini:

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
sumber

Terima kasih banyak, ini tentu saja berhasil, dan yang lebih penting, saya mulai memahami cara kerjanya. Anda baik sekali untuk menulis ini, saya benar-benar menghabiskan setidaknya 3 atau 4 jam mencoba untuk membuat ini semua bekerja, sesedih itu haha. Terima kasih banyak, Linus!

Cocorico

Ini tidak berhasil untuk saya. Di Browser saya mendapatkan halaman kosong. Di sisi server tidak ada keluaran kecuali "otorisasi klien" dan "otorisasi jabat tangan".

Boris

1

@ Boris Anda mungkin memiliki masalah itu jika Anda membuka file index.html lokal. Jika ya, ganti tag skrip dengan src = "http: //. Jika Anda menghosting di server web, buka konsol javascript dan coba identifikasi apa yang gagal.

CodeMonkeyKing

4

awalnya saya mendapatkan 'io not defined' - saya menggunakan ini sebagai gantinya <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > dan sekarang berfungsi

Alexander Mills

Anda harus menjalankan "npm init" dan kemudian menginstal soket io melalui npm "npm install socket.io --save"

Farid Movsumov

31

Ini kiriman saya!

jika Anda memasukkan kode ini ke dalam file bernama hello.js dan menjalankannya menggunakan node hello.js, pesan itu harus mencetak hello, itu telah dikirim melalui 2 soket.

Kode tersebut menunjukkan bagaimana menangani variabel untuk pesan halo yang dipantulkan dari klien ke server melalui bagian kode berlabel // Mirror.

Nama variabel dideklarasikan secara lokal daripada semua di atas karena hanya digunakan di setiap bagian di antara komentar. Masing-masing dapat berada dalam file terpisah dan dijalankan sebagai node sendiri.

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

Luaskan cuplikan

kesalahan
sumber

Saya pikir ini harus menjadi solusi yang diterima. Setidaknya membantu saya.

Daft Fox

21

Mungkin ini bisa membantu Anda juga. Saya mengalami beberapa masalah dalam memahami cara kerja socket.io, jadi saya mencoba merebus contoh sebanyak yang saya bisa.

Saya mengadaptasi contoh ini dari contoh yang diposting di sini: http://socket.io/get-started/chat/

Pertama, mulai di direktori kosong, dan buat file yang sangat sederhana bernama package.json Tempatkan yang berikut ini di dalamnya.

{
"dependencies": {}
}

Selanjutnya, pada baris perintah, gunakan npm untuk menginstal dependensi yang kita perlukan untuk contoh ini

$ npm install --save express socket.io

Ini mungkin memakan waktu beberapa menit tergantung pada kecepatan koneksi jaringan Anda / CPU / dll. Untuk memeriksa bahwa semuanya berjalan sesuai rencana, Anda dapat melihat file package.json lagi.

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

Buat file bernama server.js Ini jelas akan menjadi server kami yang dijalankan oleh node. Tempatkan kode berikut ke dalamnya:

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

Buat file terakhir bernama index.html dan tempatkan kode berikut ke dalamnya.

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

Anda sekarang dapat menguji contoh yang sangat sederhana ini dan melihat beberapa keluaran yang mirip dengan berikut ini:

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

Jika Anda membuka browser web, dan mengarahkannya ke nama host tempat Anda menjalankan proses node, Anda akan melihat nomor yang sama muncul di browser Anda, bersama dengan browser terhubung lainnya yang melihat halaman yang sama.

ray_voelker
sumber

10

Saya menyadari posting ini sudah berumur beberapa tahun sekarang, tetapi kadang-kadang pemula bersertifikat seperti saya membutuhkan contoh kerja yang benar-benar dipreteli ke bentuk paling sederhana mutlak.

setiap contoh socket.io sederhana saya bisa menemukan http.createServer () terlibat. tetapi bagaimana jika Anda ingin memasukkan sedikit keajaiban socket.io di halaman web yang sudah ada? berikut adalah contoh termudah dan terkecil mutlak yang dapat saya berikan.

ini hanya mengembalikan string yang diteruskan dari konsol 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>

untuk berlari:

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

gunakan sesuatu seperti tes port ini untuk memastikan port Anda terbuka.

sekarang jelajahi http: //localhost/index.html dan gunakan konsol browser Anda untuk mengirim pesan kembali ke server.

tebakan terbaik, saat menggunakan http.createServer, ini mengubah dua baris berikut untuk Anda:

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

Saya harap contoh yang sangat sederhana ini membuat rekan pemula saya sedikit kesulitan. dan harap perhatikan bahwa saya menghindari penggunaan "kata yang dipesan" untuk mencari nama variabel yang ditentukan pengguna untuk definisi soket saya.

edwardsmarkf
sumber

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

Don Cheadle

1

Sangat Sangat Berguna, Anda menyelamatkan hari saya. Terima kasih banyak. Ini adalah jawaban yang paling sederhana tanpa memuat terlalu banyak di node.js, contoh ini lebih baik bagi semua pemula untuk memulai dan membiasakan diri dengan node. Sekali lagi terima kasih

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

Dan jalankan perintah ini untuk menjalankan aplikasi.

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

dan buka URL: - http://127.0.0.1:3000/Port mungkin berbeda. dan Anda akan melihat OUTPUT ini

Vishal Thakur
sumber

Apa contoh contoh Socket.io yang paling sederhana?

Jawaban:

index.html

app.js