2012-03-28 4 views
87

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

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

+4

Что случилось с первым примером (http://socket.io/#how-to-use)? Для меня это достаточно просто ... – maerics

+0

Привет, его немного поздно, но кто-нибудь в будущем может найти хороший учебник здесь, используя socketio с nodejs. Http: // programmerblog.net/use-socketio-with-nodejs/ –

ответ

131

Редактировать: Я чувствую, что лучше всем проконсультироваться с отличным chat example на странице начала работы 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); 
+0

Спасибо, тонна, это работает, конечно, и, что более важно, я начинаю понимать, как это работает. Очень из вас, чтобы написать это, я честно потратил, по крайней мере, 3 или 4 часа, пытаясь заставить все это работать, так грустно, что это ха-ха. Спасибо, так много Линус! – Cocorico

+0

Это не работает для меня. В браузере я получаю пустую страницу. На стороне сервера нет выходных данных, кроме «разрешенных клиентом» и «рукопожатие». – Boris

+1

@Boris у вас может возникнуть эта проблема, если вы открыли файл index.html local. Если вы это сделали, замените теги скрипта на src = "http: //. Если вы размещаете на веб-сервере, тогда откройте консоль javascript и попытайтесь определить, что происходит. – CodeMonkeyKing

16

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

Я приспособил этот пример из примера публикуемую здесь: http://socket.io/get-started/chat/

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

{ 
"dependencies": {} 
} 

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

$ npm install --save express socket.io 

Это может занять несколько минут в зависимости от скорости вашего подключения к сети/CPU/и т.д. Чтобы проверить, что все прошло так, как планировалось, вы можете посмотреть файл 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 

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

18

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

Если вы поместили этот код в файл hello.js и запустили его с помощью узла hello.js, он должен распечатать сообщение hello, оно было отправлено через 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);

7

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

каждый простой пример 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 & 

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

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

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

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

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

+1

' каждый простой пример socket.io, я мог бы найти задействованный http.createServer(). Но что, если вы хотите включить немного магии socket.io в существующую веб-страницу? Mhm yes ... 'var app = http.createServer ('- wut – mmcrae