Ví dụ về ví dụ Socket.io đơn giản nhất có thể là gì?


113

Vì vậy, tôi đã cố gắng tìm hiểu Socket.io gần đây, nhưng tôi không phải là một lập trình viên siêu giỏi và hầu hết mọi ví dụ tôi có thể tìm thấy trên web (tin rằng tôi đã xem hàng giờ đồng hồ), đều có thêm những thứ làm phức tạp mọi thứ. Rất nhiều ví dụ thực hiện một loạt điều khiến tôi bối rối, hoặc kết nối với một cơ sở dữ liệu kỳ lạ nào đó, hoặc sử dụng coffeescript hoặc hàng tấn thư viện JS làm lộn xộn mọi thứ.

Tôi muốn xem một ví dụ cơ bản, hoạt động trong đó máy chủ chỉ gửi một tin nhắn đến máy khách 10 giây một lần, cho biết đó là mấy giờ và máy khách ghi dữ liệu đó vào trang hoặc đưa ra một cảnh báo, một việc rất đơn giản. Sau đó, tôi có thể tìm ra mọi thứ từ đó, thêm những thứ tôi cần như kết nối db, v.v. Và vâng, tôi đã kiểm tra các ví dụ trên trang socket.io và chúng không phù hợp với tôi và tôi không hiểu chúng làm gì .


4
Có gì sai với ví dụ đầu tiên tại ( socket.io/#how-to-use )? Có vẻ như đủ đơn giản với tôi ...
maerics

1
Xin chào, hơi muộn nhưng bất kỳ ai trong tương lai đều có thể tìm thấy một hướng dẫn tốt ở đây trong việc sử dụng socketio với nodejs. Programmerblog.net/using-socketio-with-nodejs
Jason W

Câu trả lời:


154

Chỉnh sửa: Tôi cảm thấy tốt hơn cho bất kỳ ai tham khảo ví dụ trò chuyện tuyệt vời trên trang bắt đầu Socket.IO. API đã được đơn giản hóa khá nhiều kể từ khi tôi cung cấp câu trả lời này. Điều đó đang được nói, đây là câu trả lời ban đầu được cập nhật nhỏ cho API mới hơn.

Chỉ vì hôm nay tôi cảm thấy rất vui:

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

Cảm ơn rất nhiều, điều này tất nhiên hiệu quả và quan trọng hơn, tôi đang bắt đầu hiểu cách hoạt động của nó. Thật tốt khi bạn viết điều này, tôi thực sự đã dành ít nhất 3 hoặc 4 giờ để cố gắng làm cho tất cả những điều này thành công, điều đó thật đáng buồn haha. Cảm ơn Linus rất nhiều!
Cocorico

Điều này không hiệu quả với tôi. Trong Trình duyệt, tôi nhận được một trang trống. Ở phía máy chủ không có kết quả đầu ra nào ngoại trừ "máy khách được ủy quyền" và "bắt tay được ủy quyền".
Boris

1
@Boris bạn có thể gặp sự cố đó nếu bạn mở tệp index.html cục bộ. . Nếu bạn đã, sau đó thay thế các thẻ script với src = "http: // Nếu bạn đang lưu trữ trên một máy chủ web sau đó mở ra giao diện điều khiển javascript và cố gắng xác định những gì là không.
CodeMonkeyKing

4
ban đầu tôi nhận được 'io notined ' - thay vào đó tôi đã sử dụng cái này <script src = " cdn.socket.io/socket.io-1.2.1.js " > </script > và bây giờ nó hoạt động
Alexander Mills

Bạn nên chạy "NPM init" và sau đó cài đặt ổ cắm io qua NPM "NPM cài đặt socket.io --save"
Farid Movsumov

31

Bài nộp của tôi đây!

Nếu bạn đặt mã này vào một tệp có tên hello.js và chạy nó bằng nút hello.js, nó sẽ in ra thông báo hello, nó đã được gửi qua 2 socket.

Đoạn mã hiển thị cách xử lý các biến cho một thông báo xin chào được gửi từ máy khách đến máy chủ thông qua phần mã có nhãn // Mirror.

Các tên biến được khai báo cục bộ thay vì tất cả ở trên cùng vì chúng chỉ được sử dụng trong mỗi phần giữa các chú thích. Mỗi cái trong số này có thể nằm trong một tệp riêng biệt và chạy như một nút riêng của 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);


Tôi nghĩ đây nên là giải pháp được chấp nhận. Đã giúp tôi ít nhất.
Daft Fox

21

Có thể điều này cũng có thể giúp ích cho bạn. Tôi gặp một số khó khăn trong việc xoay quanh cách hoạt động của socket.io, vì vậy tôi đã cố gắng thu thập một ví dụ nhiều nhất có thể.

Tôi đã điều chỉnh ví dụ này từ ví dụ được đăng ở đây: http://socket.io/get-started/chat/

Đầu tiên, hãy bắt đầu trong một thư mục trống và tạo một tệp rất đơn giản có tên là package.json Đặt phần sau vào đó.

{
"dependencies": {}
}

Tiếp theo, trên dòng lệnh, sử dụng npm để cài đặt các phụ thuộc chúng ta cần cho ví dụ này

$ npm install --save express socket.io

Quá trình này có thể mất vài phút tùy thuộc vào tốc độ kết nối mạng / CPU / v.v. Để kiểm tra xem mọi thứ đã diễn ra như kế hoạch chưa, bạn có thể xem lại tệp package.json .

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

Tạo một tệp có tên server.js Đây rõ ràng sẽ là máy chủ của chúng tôi được chạy bởi nút. Đặt mã sau vào đó:

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

Tạo tệp cuối cùng có tên là index.html và đặt mã sau vào đó.

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

Bây giờ bạn có thể kiểm tra ví dụ rất đơn giản này và thấy một số đầu ra tương tự như sau:

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

Nếu bạn mở trình duyệt web và trỏ nó đến tên máy chủ mà bạn đang chạy quy trình nút, bạn sẽ thấy các số tương tự xuất hiện trong trình duyệt của mình, cùng với bất kỳ trình duyệt được kết nối nào khác nhìn vào cùng một trang đó.


10

Tôi nhận ra rằng bài đăng này đã được vài năm tuổi, nhưng đôi khi những người mới được chứng nhận chẳng hạn như bản thân tôi cần một ví dụ làm việc hoàn toàn được rút gọn xuống dạng đơn giản nhất tuyệt đối.

mọi ví dụ về socket.io đơn giản mà tôi có thể tìm thấy http.createServer () có liên quan. nhưng nếu bạn muốn bao gồm một chút ma thuật của socket.io vào một trang web hiện có thì sao? đây là ví dụ đơn giản nhất và nhỏ nhất mà tôi có thể nghĩ ra.

điều này chỉ trả về một chuỗi được truyền từ bảng điều khiển 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>

chạy:

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

sử dụng một cái gì đó như kiểm tra cổng này để đảm bảo cổng của bạn đang mở.

bây giờ hãy duyệt đến http: //localhost/index.html và sử dụng bảng điều khiển trình duyệt của bạn để gửi thư trở lại máy chủ.

phỏng đoán tốt nhất, khi sử dụng http.createServer, nó sẽ thay đổi hai dòng sau cho bạn:

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

tôi hy vọng ví dụ rất đơn giản này sẽ giúp những người mới của tôi gặp khó khăn. và xin lưu ý rằng tôi đã tránh sử dụng "từ dành riêng" tìm kiếm các tên biến do người dùng xác định cho các định nghĩa socket của tôi.


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

1
Rất rất hữu ích, bạn đã tiết kiệm ngày của tôi. Cảm ơn rất nhiều. Đây là câu trả lời đơn giản nhất mà không cần tải quá nhiều trong node.js, ví dụ này tốt hơn cho tất cả những người mới bắt đầu bắt đầu và làm quen với nút. Một lần nữa cảm ơn bạn
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);
});

chạy các lệnh này để chạy ứng dụng.

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

và mở URL: - http://127.0.0.1:3000/Cổng có thể khác. và bạn sẽ thấy ĐẦU RA này

nhập mô tả hình ảnh ở đây

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.