Socket.io Является ли библиотека JavaScript для веб-приложений, позволяющих в режиме реального времени Связь между клиентами и серверами. Он имеет две части: клиентская библиотека, которая работает в браузере, и библиотека на боковых серверах для node.js Отказ Оба компонента имеют почти идентичный API. Как Node.js, это управляется событиями. Приложения для чата или в социальных сетях, в которых страница пользователя (клиент) получает сообщения или сообщения от других пользователей, являются наиболее частыми случаями использования для WebSockets и Socket.IO.
Разъем. Ио в первую очередь использует Websocket Протокол с опросом в качестве опции Foxback при предоставлении одного и того же интерфейса. Хотя его можно использовать как просто обертка для Websocket Он предоставляет многие другие функции, включая вещание на несколько розетки, хранения данных, связанных с каждым клиентом, и асинхронный ввод/вывод.
В этой статье мы создадим базовое приложение чата, которое позволяет пользователям говорить друг с другом в режиме реального времени. Наше приложение будет состоять из двух отдельных компонентов, сервера и клиента, каждый из которых с разными обязанностями:
Обязанности сервера для нашего приложения чата
- Служите файлы клиента HTML, CSS и JavaScript для пользователей
- Запустите соединение Socket.IO
- Получать события от клиентов (например, новое сообщение чата) и транслируйте их другим клиентам
Обязанности клиентов для нашего приложения чата
- Load Socket.IO Клиентская библиотека
- Установить соединение с помощью Socket.io На нашем сервере
- Emit и получать события в/из Socket.io, работающие на нашем сервере
- Добавьте наши собственные сообщения в чат через JavaScript
Теперь, когда мы знаем, что нам нужно построить, давайте начнем!
Проверьте установленные Nodejs
Проверка, установлена ли NODEJS на вашем компьютере, печатая его версия, используя следующую команду в командной строке:
1. > node -v v14.16.0
Если вы не получаете никакой версии, напечатанную на вашем терминале, это означает, что у вас нет NODEJS, установленных на вашем компьютере. Загрузите установщик из Веб-сайт Nodejs. .
Создание папки для нашего приложения чата
Теперь давайте создадим новую папку для нашего проекта:
mkdir chat-app cd chat-app
Мкдир делает новый каталог. CD Изменяет текущий рабочий каталог.
Теперь, когда мы находимся в правильном каталоге. Мы можем начать с инициализации NPM, чтобы получить нашу новую настройку проекта.
Инициализировать НПМ
После того, как вы навигации по правильной папке, вы можете инициализировать NPM на этой папке:
npm init -y
С помощью узла, технически, мы могли бы указать наш собственный базовый веб-сервер с нуля. Однако в реальном мире люди не делают этого. В реальном мире есть супер знаменитый пакет под названием Экспресс Отказ Экспресс Это отраслевой стандарт для создания серверов в узле.
Установка экспресс
npm i express@4.16.4
Вышеуказанное утверждение означает, что установка Express в указанном номере версии.
В папке Chat-App создайте новый файл под названием index.js Отказ
Настройте наш сервер
Внутри index.js Добавьте следующий код:
1. const express=require('express');
2. const app=express();
3. app.get('/',(req,res)=>{
res.send('Express is up and running!');
})
4. const port=process.env.PORT || 3000;
5. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
Объяснение вышеуказанного кода:
Линия 1: Требуемая функция используется для импорта Express Express, которая хранится в переменной под названием выражать Экспресс-библиотека обнародовала только одну функцию. Итак, Express на самом деле является функцией, в отличие от чего-то вроде объекта. Мы называем это, чтобы создать новое экспресс-приложение.
Строка 2: используется для настройки нашего сервера, используя различные методы, представленные на самом приложении.
Строка 4: это порт, который вы хотите, чтобы приложение прослушало.
Линия 5: используется для запуска сервера и делает его прослушиванием по конкретному порту.
Вы можете запустить сервер, вызывая узел со сценарием в командной строке:
node index.js Server is listening on port 3000
В папке Chat-App создайте поддавшись под названием публичный Отказ Внутри общедоступной папки создайте новый файл под названием Index.html. Внутри index.html Добавьте следующий код внутри:
Socket.IO chat Socket.io Chat App
Внутри index.js заменить
1. const express=require('express');
2. const app=express();
3. app.get('/',(req,res)=>{
res.send('Express is up and running!');
})
4. const port=process.env.PORT || 3000;
5. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
с этим:
1. const path=require('path');
2. const express=require('express');
3. const app=express();
4. const port=process.env.PORT || 3000;
5. const publicDirectoryPath=path.join(__dirname,'/public');
6. app.use(express.static(publicDirectoryPath));
7. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
Теперь, что мы сделаем с изменениями. Мы можем запустить сервер, вызывая узел со скриптом в командной строке:
node index.js Server is listening on port 3000
Начало работы с Socket.io
1.0 Установка Socket.IO.
Socket.io Это не родной пакет к узлу, поэтому он должен быть установлен. Поскольку вы хотите убедиться, что он включен в модули узлов, обязательно установите его локально, а затем требуют его на вашем сервере.
Теперь установите Socket.io В каталоге Chat-App, запустив команду npm установить socket.io @ 2.2.0 В командной строке:
npm install socket.io@2.2.0
Раздел зависимостей вашего package.json теперь появится в конце package.json Файл и будет включать Socket.io Отказ
{
"name": "chat-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"socket.io": "^2.2.0"
}
}
Основная настройка с Express:
Экспресс Приложение может быть передано на http . Сервер, который будет прикреплен к Socket.io Отказ Теперь давайте редактировать index.js Чтобы добавить его:
const path=require("path");
const http=require("http");
const express=require('express');
const socketio=require('socket.io');
const app=express();
const server=http.createServer(app);
const io=socketio(server);
const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,"/public");
app.use(express.static(publicDirectoryPath));
io.on("connection",(client)=>{
console.log('New websocket connection');
})
server.listen(port,()=>{
console.log(`Server is up on port ${port}!`);
})
Обратите внимание, что я инициализирую новый экземпляр Socket.io Проходя Сервер (HTTP-сервер) объект. Затем я слушаю событие подключения для входящих розетков и войти в консоль.
Теперь в Index.html добавьте следующий фрагмент перед (Конец тетра тела):
Это все, что нужно, чтобы загрузить Socket.io-Client , который обнажает IO Global, а затем подключить.
Запустив узел index.js снова, если он уже запущен, перезапустите процесс, нажав Control + C, а затем запустить Узел index.js снова. Теперь укажите браузер на http://localhost: 3000 Отказ Вы должны увидеть консоль, распечатайте что-то «новое подключение Websocket»
Каждый разъем также загорется специальное событие отключения:
io.on('connection', (client) => {
console.log('New websocket connection');
client.on('disconnect', () => {
console.log(''New websocket disconnected');
});
});
Наиболее используемые функции при работе с Socket.IO являются Socket.emit (EventName, Data) и Socket.ON (EventName, Data) для Emit и Capture Events как на сервере, так и на клиентах. Socket.emit () используется для отправки данных и Socket.on () используется для приема данных. Как правило, просто не забудьте иметь Socket.on () Функция для каждого события вы отправляете с помощью Socket.emit () Отказ
NB: EventName Может быть любое пользовательское имя, которое вы хотите назвать.
Пример: базовое приложение чата
В index.js отредактируйте файл:
const path=require("path");
const http=require("http");
const express=require('express');
const socketio=require('socket.io');
const app=express();
const server=http.createServer(app);
const io=socketio(server);
const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,"/public");
app.use(express.static(publicDirectoryPath));
io.on("connection",(client)=>{
console.log('New websocket connection');
client.on('messageFromClient', msg => {
io.emit('messageFromServer', msg);
});
client.on('disconnect', () => {
console.log('New websocket disconnected');
});
})
server.listen(port,()=>{
console.log(`Server is up on port ${port}!`);
})
Внутри index.html Изменить файл:
Socket.IO chat
В приведенном выше коде произошло две вещи.
//server (emit) -> client (receive) -messageFromServer //client (emit) -> server(receive) -messageFromClient
Если вы достигли этой точки, большое спасибо. Я надеюсь, что этот учебник был полезен для вас И увидимся всех в следующем.
Если вам нравится моя работа, пожалуйста, подумайте, чтобы я мог принести больше проектов, больше статей для вас
Если вы хотите узнать больше о веб-разработке, не забудьте Следуй за мной на YouTube!
Оригинал: “https://dev.to/cglikpo/getting-started-with-socket-io-7m4”