Кратко ръководство за основите на Socket.io

Преди няколко месеца започнах да уча Node.js и едно от първите неща, на които се натъкнах, беше Socket.io; изглеждаше като доста вълнуваща рамка, но не можах да намеря лесно за разбиране основно ръководство като начало. Пиша това ръководство, за да не се налага да се борите с документацията на Socket.io/Node, както направих аз, така че нека започваме!

Socket.io е JavaScript библиотека, която позволява двупосочна комуникация между вашия Node.js сървър и вашия уеб клиент; това е възможно с помощта на сокети, което е връзка между 2 компютъра в мрежата. Не се притеснявайте, не е толкова сложно, колкото звучи, Socket.io абстрахира всички трудности и ни улеснява!

Събитието Hello!

Първата концепция, която трябва да разберем, когато използваме Socket.io, е, че се основава на събития, където:

Нашият сървър ще излъчи събитие.
Нашият клиент ще реагира на събитие.

сървър

socket.emit('hello');

Клиент

socket.on('hello', function(){  
   console.log('hello world!');
});

Когато излъчваме събитието 'hello' на сървъра, обектът на сокет на клиента ще получи събитието и ще реагира на него с даденото обратно извикване, в този случай нашето анонимно обратно извикване ще регистрира 'hello world!' .

Множество събития и манипулатори

Можем да създадем толкова събития, колкото искаме и сме в състояние да ги уловим и да реагираме на тях по различни начини.

сървър

socket.emit('goodbye');

Клиент

socket.on('hello', function(){  
   console.log('hello world!');
});
socket.on('goodbye', function(){  
   console.log('goodbye world!');
});

В този случай ние излъчваме събитие ‘goodbye’ на нашия сървър, така че клиентът ще улови това събитие и ще отпечата ‘goodbye world!’ на нашата конзола.

Изпращане на обекти в рамките на нашите събития

Понякога не само искаме да задействаме събитие, но също така искаме да изпратим информация на клиента. За да направим това, ние просто добавяме обектите, които искаме да изпратим като параметри към излъчването, и ги получаваме в нашата функция за обратно извикване.

сървър

var person = {name: 'Rene', age: 26};  
socket.emit('person', person);

Клиент

socket.on('person', function(person){  
   console.log(person.name, 'is', person.age, 'years old.');
});

Двупосочна комуникация

Помните ли, когато казах, че Socket.io позволява двупосочна комуникация? Е, това означава, че можем не само да изпращаме информация от сървъра към клиента, но и обратно.

сървър

var person = {name: 'Rene', age: 26};  
socket.emit('person', person);
socket.on('confirmation',function(){  
   console.log('The client received the person');
});

Клиент

socket.on('person', function(person){  
   console.log(person.name, 'is', person.age, 'years old.');
   socket.emit('confirmation');
});

В този случай, след като лицето бъде получено от клиента, ние ще изпратим събитие „потвърждение“в рамките на обратното извикване, за да уведомим сървъра, че клиентът е получил лицето. (Да, можем да излъчваме събития вътре в обратните извиквания за други събития).

Създаване на връзката Socket.io

Страната на сървъра

Сега, когато разбираме как да излъчваме събития, да изпращаме данни в тях и да реагираме на тях, е време да създадем сокет между клиента и сървъра.

От страната на нашия сървър (Node.js) ще трябва да инсталираме Socket.io с помощта на мениджъра на пакети на възли (NPM). За да направим това, можем просто да отидем в директорията на проекта и:

npm install socket.io

След като го инсталираме, можем да го изискваме в нашето приложение.

сървър

var app = require('http').createServer(handler)  
var io = require('socket.io')(app);

След като създадем нашия обект Socket.io и го прикачим към нашия http сървър, трябва да обработим клиентските връзки. При клиентска връзка сървърът ще излъчи събитието 'connection', това събитие за връзка може да бъде обработено от обекта io, за да се създадесокет.

сървър

var app = require('http').createServer();  
var io = require('socket.io')(app);
app.listen(80);
io.on('connection', function (socket) {
  // (Insert socket code here)
});

Всеки обект на сокет представлява комуникационен тунел между клиента и сървъра и ще се създава нов всеки път, когато клиент се свърже със сървъра.

Клиентска страна

От страна на клиента трябва да направим препратка към клиентския JavaScript файл на Socket.io.

<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>

След като направим това, можем просто да създадем нов сокет, като се свържем с нашия собствен http сървър, използвайки обекта io (клиент).

<script>
  var socket = io('http://localhost');
  // (Insert socket code here)
</script>

Свързване на точките

Сега, когато имаме сокет както на сървъра, така и на клиента, можем да започнем да излъчваме събития, както правехме преди.

сървър

var app = require('http').createServer();
var io = require('socket.io')(app);
app.listen(80);
io.on('connection', function (socket) {
  socket.on('message',function(message){
    console.log(message); 
  });
  socket.emit('message','Hello, my name is Server');
});

Клиент

<script>
  var socket = io('http://localhost');
  socket.on('message',function(message){
    console.log(message); 
  });
  socket.emit('message','Hello, my name is Client');
</script>

Ето! успешно създадохме връзка Socket.io. Надяваме се, че разбирате много по-добре основите на Socket.io и не съм ви объркал толкова много!

Благодаря за четенето и ще съм благодарен, ако отделите малко време, за да ми дадете отзиви и да ми помогнете да подобря това ръководство! Така или иначе, забавлявайте се със Socket.io :)

Ето много по-приятелска версия на кода, ако искате да го стартирате сами:

Кратко ръководство за основите на Socket.io