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

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



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

817   4  

4 ответов:

Edit: Я чувствую, что это лучше для всех, чтобы проконсультироваться отлично пример чата на Socket.IO страница начало работы. API был довольно упрощен, так как я предоставил этот ответ. Тем не менее, вот оригинальный ответ, обновленный small-small для более нового API.

просто потому что я чувствую себя хорошо сегодня:

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

приложение.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);
135  
2015-05-01 10:03:02

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

Если вы поместите этот код в файл с именем 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);
22  
2015-02-13 09:51:53

может быть, это может помочь вам также. У меня были некоторые проблемы с тем, чтобы моя голова обернулась вокруг того, как socket.io работал, поэтому я старался свести пример к минимуму, насколько мог.

я адаптировал этот пример из примера, опубликованного здесь:http://socket.io/get-started/chat/

во-первых, запустить в пустой каталог, и создать очень простой файл под названием пакета.json поместите в него следующее.

{
"dependencies": {}
}

далее, по команде line, используйте npm для установки зависимостей, которые нам нужны для этого примера

$ npm install --save express socket.io

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

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

создайте файл с именем сервер.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);

создать последний файл называется .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

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

18  
2014-10-21 22:37:35

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

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

это просто возвращает строку, переданную от консоль в верхнем регистре.

приложение.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
    });

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

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

8  
2016-05-18 01:15:12

Comments

    Ничего не найдено.
Click here to cancel reply.