Учебники

Socket.IO — Hello World

Декабрь 30, 2018

Создайте файл с именем app.js и введите следующий код для настройки экспресс-приложения: 

var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res) {
   res.sendfile('index.html');
});

http.listen(3000, function() {
   console.log('listening on *:3000');
});

Нам понадобится файл index.html для обслуживания, создайте новый файл с именем index.html и введите в него следующий код: 

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <body>Hello world</body>
</html>

Чтобы проверить, работает ли это, перейдите в терминал и запустите это приложение, используя следующую команду — 

nodemon app.js

Это запустит сервер на локальном хосте: 3000. Зайдите в браузер и введите localhost: 3000, чтобы проверить это.

Это настраивает наше экспресс-приложение и теперь подает файл HTML по корневому маршруту. Теперь нам потребуется Socket.IO и будет регистрироваться «Пользователь подключен», каждый раз, когда пользователь заходит на эту страницу, и «Пользователь отключен», каждый раз, когда кто-то покидает / закрывает эту страницу. 

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
   res.sendfile('index.html');
});

//Whenever someone connects this gets executed
io.on('connection', function(socket) {
   console.log('A user connected');

   //Whenever someone disconnects this piece of code executed
   socket.on('disconnect', function () {
      console.log('A user disconnected');
   });
});

http.listen(3000, function() {
   console.log('listening on *:3000');
});

Require (‘socket.io’) (http) создает новый экземпляр socket.io, подключенный к http-серверу. Обработчик событий io.on обрабатывает события подключения, отключения и т. Д. В нем, используя объект сокета.

Мы настроили наш сервер для регистрации сообщений о подключениях и отключениях. Теперь мы должны включить клиентский скрипт и инициализировать объект сокета, чтобы клиенты могли устанавливать соединения при необходимости. Сценарий обслуживается нашим сервером io по адресу /socket.io/socket.io.js .

После выполнения описанной выше процедуры файл index.html будет выглядеть следующим образом: 

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <script src = "/socket.io/socket.io.js"></script>
   
   <script>
      var socket = io();
   </script>
   <body>Hello world</body>
</html>

Если вы перейдете на localhost: 3000 сейчас (убедитесь, что ваш сервер работает), вы получите распечатку Hello World в вашем браузере. Теперь проверьте журналы консоли вашего сервера, она покажет следующее сообщение — 

A user connected

Если вы обновите свой браузер, он отключит сокет и восстановит соединение. В журналах консоли вы можете увидеть следующее: 

A user connected
A user disconnected
A user connected

Теперь у нас работают сокетные соединения. Вот как легко настроить соединения в Socket.IO.

43
Share: