Каков пример самого простого из возможных примеров Socket.io? - PullRequest
Новая
       21

Каков пример самого простого из возможных примеров Socket.io?

103 голосов
/ 29 марта 2012

Итак, я пытался понять Socket.io в последнее время, но я не супер отличный программист, и почти каждый пример, который я могу найти в Интернете (поверьте мне, я искал часами), содержит дополнительные материалы, которые усложняет вещи. Многие примеры делают кучу вещей, которые меня смущают, или подключаются к какой-то странной базе данных, или используют coffeescript или тонны библиотек JS, которые загромождают вещи.

Мне бы хотелось увидеть базовый, работающий пример, где сервер просто отправляет клиенту сообщение каждые 10 секунд, сообщая, который час, а клиент записывает эти данные на страницу или выдает предупреждение, что-то очень просто. Затем я могу выяснить что-то оттуда, добавить вещи, которые мне нужны, такие как db-соединения и т. Д. И да, я проверил примеры на сайте socket.io, и они не работают для меня, и я не понимаю, что они делают .

Ответы [ 4 ]

142 голосов
/ 29 марта 2012

Редактировать: Мне кажется, кому-то лучше посоветовать отличный пример чата на странице начала работы с Socket.IO.API был довольно упрощен, так как я предоставил этот ответ.Тем не менее, вот оригинальный ответ, обновленный small-small для более нового 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);
26 голосов
/ 13 февраля 2015

Вот мое представление!

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

В коде показано, как обрабатывать переменные для сообщения приветствия, возвращаемого клиентом на сервер через раздел кода с меткой //Mirror.

Имена переменных объявляются локально, а не всевверху, потому что они используются только в каждом разделе между комментариями.Каждый из них может находиться в отдельном файле и работать как собственный узел. 

// 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);
18 голосов
/ 21 октября 2014

Может быть, это может помочь вам.У меня были некоторые проблемы, когда я пытался понять, как работает 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 голосов
/ 10 января 2016

я понимаю, что этому посту уже несколько лет, но иногда сертифицированным новичкам, таким как я, нужен рабочий пример, который полностью приведен к абсолютно простейшей форме.

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

это просто возвращает строку, переданную из консоли 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>

для запуска: 

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

используйте что-то вроде test port , чтобы убедиться, что ваш порт открыт.

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

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

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

Надеюсь, этот очень простой пример избавит моих собратьев-новичков в борьбе.и, пожалуйста, обратите внимание, что я держался подальше от использования «зарезервированного слова», определяющего определяемые пользователем имена переменных для моих определений сокетов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...