Який приклад найпростішого можливого прикладу Socket.io?


113

Так, останнім часом я намагаюся розібратися в Socket.io, але я не програміст із великою грубістю, і майже кожен приклад, який я можу знайти в Інтернеті (повірте, я шукав години і години), має зайві речі, які ускладнюють речі. Дуже багато прикладів - це чимало речей, які мене бентежать, або підключаються до якоїсь дивної бази даних, або використовують coffeescript або безліч бібліотек JS, які захаращують речі.

Я хотів би побачити основний, функціонуючий приклад, коли сервер просто кожні 10 секунд відправляє повідомлення клієнту, кажучи, який саме час, а клієнт записує ці дані на сторінку або піднімає попередження, щось дуже просте. Тоді я можу розібратися звідти, додати речі, які мені потрібні, як db-з'єднання тощо. І так, я перевірив приклади на сайті socket.io, і вони не працюють для мене, і я не розумію, що вони роблять .


4
Що не так у першому прикладі ( socket.io/#how-to-use )? Мені здається досить простою ...
maerics

1
Привіт, це трохи пізно, але будь-хто в майбутньому може знайти хороший підручник тут, використовуючи socketio з nodejs. programmerblog.net/using-socketio-with-nodejs
Jason W

Відповіді:


154

Редагувати: я вважаю, що краще будь-хто звернутися до чудового прикладу чату на сторінці Socket.IO. API був досить спрощеним, оскільки я надіслав цю відповідь. Це було сказано, ось оригінальна відповідь оновлена ​​маленька-мала для нової API.

Просто тому, що мені сьогодні добре:

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

Дякую тоні, це, звичайно, працює, і що ще важливіше, я починаю розуміти, як це працює. Дуже люб'язно, що ви це написали, я чесно витратив щонайменше 3 або 4 години, намагаючись змусити все це працювати, так сумно, як це ха-ха. Велике спасибі Лінусе!
Кокоріко

Це не працює для мене. У браузері я отримую порожню сторінку. На стороні сервера немає виходів, окрім "дозволений клієнт" та "авторизований рукостискання".
Борис

1
@Boris у вас може виникнути ця проблема, якщо ви відкрили файл index.html локальний. Якщо ви це зробили, замініть теги сценарію src = "http: //. Якщо ви хостите на веб-сервері, тоді відкрийте консоль javascript і спробуйте визначити, що не вдається."
CodeMonkeyKing

4
спочатку я отримую 'іо не визначено' - я використав це замість <script src = " cdn.socket.io/socket.io-1.2.1.js" > </script > і тепер це працює
Олександр Міллз

Ви повинні запустити "npm init", а потім встановити socket io через npm "npm встановити socket.io --save"
Фарид Мовсумов

31

Ось моє подання!

якщо ви помістите цей код у файл під назвою hello.js і запустіть його за допомогою вузла hello.js, він повинен роздрукувати повідомлення привіт, він був надісланий через 2 сокети.

У коді показано, як обробляти змінні для привітного повідомлення, відхиленого від клієнта на сервері через розділ коду з позначкою // Дзеркало.

Імена змінних оголошуються локально, а не всі вгорі, оскільки вони використовуються лише у кожному з розділів між коментарями. Кожен із них може знаходитися в окремому файлі та працювати як власний вузол.

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


Я думаю, це має бути прийнятим рішенням. Допомогли мені щонайменше.
Дафт Фокс

21

Можливо, це може вам і допомогти. У мене виникли певні проблеми з тим, як загорнути голову про те, як працює socket.io, тому я спробував зварити приклад настільки, наскільки міг.

Я адаптував цей приклад із прикладу, розміщеного тут: http://socket.io/get-started/chat/

Спочатку почніть з порожнього каталогу та створіть дуже простий файл під назвою package.json. Розмістіть у ньому наступне.

{
"dependencies": {}
}

Далі в командному рядку використовуйте npm для встановлення залежностей, які нам потрібні для цього прикладу

$ npm install --save express socket.io

Це може зайняти кілька хвилин, залежно від швидкості підключення до мережі / процесора / тощо. Щоб перевірити, чи все йшло, як було заплановано, ви можете переглянути файл package.json ще раз.

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

Створіть файл під назвою server.js Це очевидно буде наш сервер, керований вузлом. Помістіть у нього такий код:

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

Створіть останній файл під назвою index.html і помістіть у нього наступний код.

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

Тепер ви можете протестувати цей дуже простий приклад і побачити деякий вихід, подібний до наступного:

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

Якщо ви відкриєте веб-браузер і вкажете його на ім’я хоста, на якому запущений процес вузла, ви повинні побачити ті самі номери у вашому браузері разом з будь-яким іншим підключеним браузером, який дивиться на цю ж сторінку.


10

Я розумію, що цій посаді вже кілька років, але іноді сертифікованим новачкам, таким як я, потрібен робочий приклад, який повністю позбавлений до найпростішої форми.

у кожному простому прикладі socket.io я можу знайти http.createServer (). але що робити, якщо ви хочете включити трохи socket.io магії у існуючу веб-сторінку? ось абсолютний найпростіший і найменший приклад, який я міг би придумати.

це просто повертає рядок, переданий з консолі ПОВЕРХНЕНО.

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>

бігти:

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

використовуйте щось подібне до цього тесту на порт, щоб переконатися, що ваш порт відкритий.

тепер перейдіть до http: //localhost/index.html і використовуйте консоль браузера для надсилання повідомлень на сервер.

у кращому випадку здогадуючись, що за допомогою http.createServer він змінює два наступні рядки для вас:

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

Я сподіваюся, що цей дуже простий приклад заряджає моїх колег-новачків, які борються. і, будь ласка, зауважте, що я тримався подалі від використання "зарезервованого слова", який шукає визначені користувачем імена змінних для моїх визначень сокета.


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гм так ... var app = http.createServer(- Wut
Дон Чідл

1
Дуже дуже корисно, ти врятував мені день. Дуже дякую. Це найпростіша відповідь, не завантажуючи занадто багато в node.js, цей приклад краще для всіх початківців почати старт і ознайомитись з вузлом. Ще раз дякую
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);
});

І запустіть ці команди для запуску програми.

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

і відкрийте URL: - http://127.0.0.1:3000/Порт може бути різним. і ви побачите цей вихід

введіть тут опис зображення

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.