Создание и запуск проекта Socket.io
Что такое Socket.io?
Socket.io - это библиотека JavaScript для двусторонней связи в реальном времени, управляемой событиями. Она может установливать эффективный, низкозатратный канал связи между браузером и сервером. Socket.io поддерживает протокол WebSocket, но не ограничивается этим; она может автоматически выбирать оптимальный механизм передачи данных (например, long polling) для обеспечения стабильности соединения.
Основные характеристики и преимущества Socket.io
- Связь в реальном времени: Поддерживает двустороннюю связь в реальном времени, пригодную для чатов, онлайн-игр, уведомлений в реальном времени и других приложений.
- Кроссплатформенная поддержка: Может работать в браузере, Node.js и на других платформах.
- Автоматическое восстановление соединения: Автоматически пытается восстановить соединение при разрыве.
- Управление событиями: Связь через механизм событий, что упрощает модель программирования.
- Высокая совместимость: Поддерживает различные механизмы передачи данных, такие как WebSocket, XHR long polling и др., что обеспечивает нормальную работу при любом сетевом окружении.
Использование Socket.io может помочь разработчикам быстро создавать эффективные приложения для связи в реальном времени.
Создание и запуск проекта Socket.io с использованием ServBay
В этой статье мы будем использовать среду Node.js, предоставляемую ServBay, для создания и запуска проекта Socket.io. Мы будем использовать функцию "Host" ServBay для настройки веб-сервера и реализуем доступ к проекту через обратное проксирование.
Создание проекта Socket.io
Инициализация проекта
Во-первых, убедитесь, что у вас установлена среда Node.js, предоставляемая ServBay. Затем создайте новый проект Socket.io в рекомендуемой корневой папке веб-сайта ServBay
/Applications/ServBay/www:bashcd /Applications/ServBay/www mkdir servbay-socketio-app cd servbay-socketio-app npm init -y npm install express socket.io1
2
3
4
5Создание серверного файла
В корневой директории проекта создайте файл
server.jsи добавьте в него следующий код:javascriptconst express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIo(server); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('chat message', (msg) => { io.emit('chat message', msg); }); }); const port = process.env.PORT || 3000; server.listen(port, () => { console.log(`Server running on port ${port}`); });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26Создание клиентского файла
В корневой директории проекта создайте файл
index.htmlи добавьте следующий код:html<!DOCTYPE html> <html> <head> <title>Socket.io Chat with ServBay</title> <style> ul { list-style-type: none; padding: 0; } li { padding: 8px; margin-bottom: 10px; background-color: #f3f3f3; } input { padding: 10px; width: 300px; } button { padding: 10px; } .servbay-banner { background-color: #4CAF50; color: white; text-align: center; padding: 10px 0; font-size: 20px; margin-bottom: 20px; } </style> </head> <body> <div class="servbay-banner">Welcome to ServBay Socket.io Chat!</div> <ul id="messages"></ul> <form id="form" action=""> <input id="input" autocomplete="off" /><button>Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); var form = document.getElementById('form'); var input = document.getElementById('input'); form.addEventListener('submit', function(e) { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message', function(msg) { var item = document.createElement('li'); item.textContent = msg; document.getElementById('messages').appendChild(item); window.scrollTo(0, document.body.scrollHeight); }); </script> </body> </html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
Вход в режим разработки
Запуск сервер разработки
Запустите сервер разработки и укажите порт (например, 8585):
bashPORT=8585 node server.js1Это запустит локально сервер разработки и откроет порт 8585.
Настройка обратного проксирования в Host ServBay
Используйте функцию "Host" ServBay для доступа к серверу разработки через обратное проксирование. В настройках Host ServBay добавьте новый обратный прокси:
- Название:
My first Socket.io dev site - Доменное имя:
servbay-socketio-test.dev - Тип хоста:
обратный прокси - IP:
127.0.0.1 - Порт:
8585
Подробные настройки см. в добавлении сайта разработки Nodejs.
- Название:
Доступ к режиму разработки
Откройте браузер и перейдите на
https://servbay-socketio-test.dev, чтобы в реальном времени просмотреть проект. Поскольку ServBay поддерживает кастомные домены и бесплатные SSL-сертификаты, вы получите повышенную безопасность.
Развертывание производственной версии
Подготовка производственной среды
Убедитесь, что ваш проект может нормально работать в производственной среде. Обычно для проектов Socket.io не требуется специальных шагов по сборке, но вам может понадобиться настроить переменные окружения или выполнить другие конфигурации.
Запуск сервера производства
Запустите сервер производства и укажите порт (например, 8586):
bashPORT=8586 NODE_ENV=production node server.js1Настройка обратного проксирования в Host ServBay
Используйте функцию "Host" ServBay для доступа к производственному серверу через обратное проксирование. В настройках Host ServBay добавьте новый обратный прокси:
- Название:
My first Socket.io production site - Доменное имя:
servbay-socketio-test.prod - Тип хоста:
обратный прокси - IP:
127.0.0.1 - Порт:
8586
- Название:
Доступ к производственной версии
Откройте браузер и перейдите на
https://servbay-socketio-test.prod, чтобы просмотреть производственную версию. Благодаря кастомным доменам и бесплатным SSL-сертификатам от ServBay, ваш сайт станет более безопасным и надежным.
Подключение к базе данных
ServBay предлагает поддержку баз данных Redis, MariaDB, PostgreSQL и MongoDB. Ниже приведены примеры подключения к этим базам данных.
Подключение к MongoDB
Установите
mongoose:bashnpm install mongoose1Затем импортируйте и подключитесь в проекте:
javascriptconst mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/servbay-socketio-app', { useNewUrlParser: true, useUnifiedTopology: true }) .then(() => console.log('MongoDB connected')) .catch(err => console.log(err));1
2
3
4
5Подключение к Redis
Установите
redis:bashnpm install redis1Затем импортируйте и подключитесь в проекте:
javascriptconst redis = require('redis'); const client = redis.createClient(); client.on('error', function (err) { console.log('Error ' + err); }); client.on('connect', function () { console.log('Redis client connected'); });1
2
3
4
5
6
7
8
9
10Подключение к MariaDB
Установите
mariadb:bashnpm install mariadb1Затем импортируйте и подключитесь в проекте:
javascriptconst mariadb = require('mariadb'); const pool = mariadb.createPool({ host: 'localhost', user: 'root', password: 'password', database: 'servbay_socketio_app' }); pool.getConnection() .then(conn => { console.log("Connected to MariaDB"); conn.release(); //release to pool }) .catch(err => { console.log("Not connected due to error: " + err); });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16Подключение к PostgreSQL
Установите
pg:bashnpm install pg1Затем импортируйте и подключитесь в проекте:
javascriptconst { Pool } = require('pg'); const pool = new Pool({ user: 'user', host: 'localhost', database: 'servbay_socketio_app', password: 'password', port: 5432, }); pool.connect((err, client, done) => { if (err) throw err; console.log('Connected to PostgreSQL'); done(); });1
2
3
4
5
6
7
8
9
10
11
12
13
14
С помощью этих шагов вы успешно создали и запустили проект Socket.io, а также использовали функции, предоставляемые ServBay, для управления и доступа к вашему проекту, одновременно подключив различные базы данных.