ChatApp_Socket

{"draftJsState":{"blocks":[{"data":{"image":{"id":"6863ceb44e5c8473d52c4e52"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dcg4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c9fao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В статье я расскажу, как можно создать чат-приложение в режиме реального времени с помощью Vue.js, Node.js, Express и SOCKET.IO.","type":"unstyled","key":"u6nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bm2v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка.","type":"header-two","key":"dflf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ade5c"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":6,"offset":100}],"inlineStyleRanges":[],"text":"Для работы нам понадобятся Node.js и NPM. Если у вас еще нет установленного Node.JS, то качайте его отсюда.","type":"unstyled","key":"3kid1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вам потребуются базовые знания JavaScript.","type":"unordered-list-item","key":"k13h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пригодятся небольшие знания по Vue.js (но это не принципиально).","type":"unordered-list-item","key":"at2tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если все готово, то можно начинать.","type":"unstyled","key":"79bfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте директорию для приложения и откройте ее в любимом редакторе. Я пользуюсь Visual Studio Code.","type":"unstyled","key":"aitj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хотите, можете работать в терминале.","type":"unstyled","key":"3t4bl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"13b2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mkdir ChatApp && cd ChatApp && code","type":"blockquote","key":"bm9ec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6u438"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте инициализируем директорию через NPM.","type":"unstyled","key":"e0l28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"denth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm init","type":"blockquote","key":"9pmq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"35kh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вам предлагают ввести какую-то информацию, смело ее вводите или нажимайте Enter для настроек по умолчанию. Такая информация используется для настройки пакета .json файла.","type":"unstyled","key":"8vomd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"31cc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка зависимостей.","type":"header-two","key":"duu5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3vqee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте установим зависимости приложения. Я покажу список нужных зависимостей и познакомлю с процессом их установки. Чтобы ничего не усложнять, ограничимся двумя зависимостями.","type":"unstyled","key":"5gm4c"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":7,"offset":3}],"inlineStyleRanges":[{"length":7,"offset":3,"style":"BOLD"}],"text":"i. EXPRESS","type":"unstyled","key":"8ifua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6ue7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":20,"style":"ITALIC"}],"text":"npm install express --save","type":"blockquote","key":"b3hcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bv6i0"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":9,"offset":3}],"inlineStyleRanges":[{"length":9,"offset":3,"style":"BOLD"}],"text":"ii.SOCKET.IO","type":"unstyled","key":"109ug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5dghj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":12,"style":"ITALIC"}],"text":"npm install --save socket.io","type":"blockquote","key":"6irkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7cc1a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После установки всех зависимостей запустите","type":"unstyled","key":"e6hp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fcak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install","type":"blockquote","key":"cetp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"49mjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так установятся все необходимые пакеты.","type":"unstyled","key":"ca9u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"o14f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фронтенд с Vue.js (разметка).","type":"header-two","key":"4tlbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ctcli"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":6,"offset":34},{"key":4,"length":9,"offset":92}],"inlineStyleRanges":[],"text":"Интерфейс приложения мы сделаем в Vue.js. Его нужно установить в нашу директорию и добавить bootstrap.","type":"unstyled","key":"d6ee0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим файл index.html.","type":"unstyled","key":"almsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"empa9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"touch index.html","type":"blockquote","key":"59cs2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cdo6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":94,"style":"ITALIC"}],"text":"Для включения в проекты Vue.js и bootstrap скопируем CDN и добавим в раздел со скриптами файла index.html.","type":"unstyled","key":"746cr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eilhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n \n \n ChatApp_Socket\n \n \n \n \n","type":"blockquote","key":"f3j0u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c6jlc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После успешной установки Vue и bootstrap перейдем к созданию разметки.","type":"unstyled","key":"9ldsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"40fpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

\n {{user.username}} {{user.type}}\n

Enter your username

\n \n

My Chat App {{connections}} connections

{{typing}} is typing

\n \n {{message.message}}\n :{{message.user}}\n \n

\n \n

\n","type":"blockquote","key":"762qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cuvoc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для подключения Socket.IO сервера к клиенту добавим клиентские JavaScript библиотеки.","type":"unstyled","key":"1noi1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ddi0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"93eb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ce7gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это будет наш файл Vue и bootstrap (HTML) для фронтенда. Можете скопировать код целиком, чтобы не отставать.","type":"unstyled","key":"e66to"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"ITALIC"}],"text":"Лучший способ научиться чему-то — повторять за другими.","type":"blockquote","key":"els0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"42h6a"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":39,"offset":13}],"inlineStyleRanges":[],"text":"Также можете скачать клиентскую библиотеку Socket.IO.","type":"unstyled","key":"c4qum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно разграничить функционал, вынеся JavaScript-код из общей разметки. Это решать вам. Но я для удобства этого делать не буду.","type":"unstyled","key":"9c3ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка сервера.","type":"header-two","key":"6fq01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8d0rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":9,"style":"ITALIC"}],"text":"Создадим server.js. Внутри файла создадим и настроим Express-сервер для работы с Socket.IO.","type":"unstyled","key":"d3mti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9pvtp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let app = require('express')();\nlet http = require('http').Server(app);\nlet io = require('socket.io')(http);\napp.get('/', (req, res) => {\n res.sendFile(__dirname + '/index.html')\n});\n\n\nhttp.listen(3000, () => {\n console.log('Listening on port *: 3000');\n});","type":"blockquote","key":"6lb0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1g7g7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это базовая конфигурация, необходимая для установки Socket.IO в бэкенде.","type":"unstyled","key":"3ojo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dma4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работает Socket.IO .","type":"header-two","key":"dbqlf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"esqm6"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":33,"offset":71}],"inlineStyleRanges":[],"text":"Socket.IO — это JavaScript-библиотека чата в режиме реального времени. Документацию можно почитать здесь (она не относится к тематике данной статьи). Я объясню лишь то, что нам потребуется для статьи.","type":"unstyled","key":"5o1qr"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":18,"offset":39}],"inlineStyleRanges":[{"length":12,"offset":72,"style":"ITALIC"}],"text":"Работа Socket.IO сводится к добавлению слушателей события для экземпляра http.Server. Именно этим мы сейчас и займемся.","type":"unstyled","key":"4qm7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2ev0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let app = require('express')();\nlet http = require('http').Server(app);\nlet io = require('socket.io')(http);\napp.get('/', (req, res) => {\n res.sendFile(__dirname + '/index.html')\n});\n\n\nhttp.listen(3000, () => {\n console.log('Listening on port *: 3000');\n});","type":"blockquote","key":"75pbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9eo04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5qdee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем будем прослушивать событие о новом подключении.","type":"unstyled","key":"fdh8v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8cd6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"io.on('connection', (socket) => {\n socket.on('disconnect', () => {\n console.log(\"A user disconnected\");\n });\n \n .....\n \n });","type":"blockquote","key":"e5sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qjul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":38,"style":"ITALIC"}],"text":"Например, если пользователь посещает 127.0.0.1:3000, то сообщение об этом напечатается в консоли.","type":"unstyled","key":"mehr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В Socket.IO есть много флагов или методов, которые можно вызывать для выполнения различных действий (например, отправка событий, прослушивание событий и т.д.).","type":"unstyled","key":"cunnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Socket.ON(): принимает в качестве параметров название события и обратный вызов. Прослушивает события, отправленные на сервер и с него. Обратный вызов нужен для получения данных, связанных с событием.","type":"unstyled","key":"cf77q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Socket.EMIT(): отправляет/посылает событие с данными или без них для прослушивания сокетов (включая себя).","type":"unstyled","key":"f9795"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Socket.Broadcast.Emit(): отправляет событие всем подключенным клиентам (кроме себя). Эти методы пригодятся для отправки событий с сервера через чат-приложение.","type":"unstyled","key":"356ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка кода клиентской части.","type":"header-two","key":"bib6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"35tqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте index.html. В нижней части файла добавьте следующий код в тег script.","type":"unstyled","key":"4icin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9qkgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"blockquote","key":"bas5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"796sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":12,"style":"ITALIC"},{"length":10,"offset":117,"style":"ITALIC"}],"text":"Мы добавили var socket = io();и создали новый экземпляр Vue. Далее внутри этого экземпляра прописали наш элемент как el: ‘#app’и объявили наш объект данных с помощью пустых массивов и свойств.","type":"unstyled","key":"5rdu9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":27,"style":"ITALIC"},{"length":6,"offset":50,"style":"ITALIC"},{"length":13,"offset":156,"style":"ITALIC"}],"text":"Давайте перейдем к объекту methods. Мы видим методSend(). Он хранит информацию о чате в массиве message и отправляет события чата на сервер с помощью флага Socket.emit().","type":"unstyled","key":"cu6ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4dev5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"methods: {\n send() {\n this.messages.push({\n message: this.newMessage,\n type: 0,\n user: 'Me',\n });\n socket.emit('chat-message', {\n message: this.newMessage,\n user: this.username\n });\n this.newMessage = null;\n },\n \n .....","type":"blockquote","key":"9bmme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"85np2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На серверной стороне мы получаем событие с флагом Socket.on() и через флаг Socket.broadcast.emit()пересылаем его другим подключенным клиентам.","type":"unstyled","key":"7onnq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":11,"style":"ITALIC"}],"text":"В хуке Vue CREATEDмы прослушиваем все события, отправленные сервером. Сюда же включено событие chat-message, которое мы пересылали с сервера ранее.","type":"unstyled","key":"4jp9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Через трансляцию событий сервер отправляет их всем подключенным клиентам, кроме самого отправителя.","type":"unstyled","key":"2eap0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e43eu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Аналогия.","type":"header-two","key":"1630u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"av90l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если пользователь А отправляет сообщение на сервер, а сервер ретранслирует его пользователям B, C, D, E и т.д., то это сообщение получат все пользователи, кроме А, поскольку он является отправителем.","type":"unstyled","key":"k0qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так что нет ничего страшного в том, что мы прослушиваем событие chat-message из объекта CREATED. Все равно мы, как отправители, не получим это сообщение с сервера.","type":"unstyled","key":"90avc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Именно так все и происходит, когда пользователи выполняют какие-то действия в ChatApp.","type":"unstyled","key":"3mhp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":92,"style":"ITALIC"},{"length":4,"offset":154,"style":"ITALIC"}],"text":"После получения с сервера события из объекта CREATED , мы сохраняем его в массиве message с message type(указывает, что сообщение отправлено с сервера) и user (тот, кто отправил сообщение).","type":"unstyled","key":"3brs3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8alv5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"socket.on('chat-message', (data) => {\n this.messages.push({\n message: data.message,\n type: 1,\n user: data.user,\n });\n });","type":"blockquote","key":"cutej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3tffn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подведем итог всему происходящему во фронтенде.","type":"unstyled","key":"ampsa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":3,"style":"BOLD"}],"text":"1. Хук Methods. Именно здесь в Vue.js вы создаете все методы/функции для компонента. И при каждом вызове метода в разметке/шаблоне Vue обращается к этому хуку.","type":"unstyled","key":"fkvgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас есть только два объявленных метода:","type":"unstyled","key":"3ejt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":3,"style":"BOLD"},{"length":7,"offset":3,"style":"ITALIC"}],"text":"i. Send(). Этот метод вызывается, когда пользователь печатает сообщение и нажимает «Отправить». Он сохраняет сообщение в массиве message и отправляет события на сервер (см. выше).","type":"unstyled","key":"78cgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":4,"style":"BOLD"},{"length":10,"offset":4,"style":"ITALIC"}],"text":"ii. addUser(). Метод отправляет на сервер событие joined и устанавливает значение переменной ready как true, показывая, что пользователь успешно присоединился к чату.","type":"unstyled","key":"crju7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9s6qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"addUser() {\n this.ready = true;\n socket.emit('joined', this.username)\n }","type":"blockquote","key":"4j489"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9bu55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"2. Хук Created. Данный хук вызывается при загрузке компонента Vue.js. Это отличное место для прослушивания всех событий с сервера.","type":"unstyled","key":"4hrgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы прослушиваем 6 событий с сервера и отправляем 1 событие на сервер.","type":"unstyled","key":"3ubbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ab6a6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"created() {\n window.onbeforeunload = () => {\n socket.emit('leave', this.username);\n }\n \n socket.on('chat-message', (data) => {\n this.messages.push({\n message: data.message,\n type: 1,\n user: data.user,\n });\n });\n\n socket.on('typing', (data) => {\n this.typing = data;\n });\n\n\n socket.on('stopTyping', () => {\n this.typing = false;\n });\n\n socket.on('joined', (data) => {\n this.info.push({\n username: data,\n type: 'joined'\n });\n\n setTimeout(() => {\n this.info = [];\n }, 5000);\n });\n\n socket.on('leave', (data) => {\n this.info.push({\n username: data,\n type: 'left'\n });\n\n setTimeout(() => {\n this.info = [];\n }, 5000);\n });\n\n socket.on('connections', (data) => {\n this.connections = data;\n });\n },","type":"blockquote","key":"1i94s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4pde5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В коде выше видно, чем занимается каждое событие.","type":"unstyled","key":"7u39k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"},{"length":6,"offset":140,"style":"ITALIC"}],"text":"3. Хук Watch. Это очень интересная штука. Он может многое, но используется для прослушивания изменений в блоке сообщений и отправки события typing, которое транслируется сервером для других клиентов.","type":"unstyled","key":"ebbfl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9a7lv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"watch: {\n newMessage(value) {\n value ? socket.emit('typing', this.username) : socket.emit('stopTyping')\n }\n },","type":"blockquote","key":"9ghpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6cat5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Еще он применяется для отметки о прочтении в разметках с используемыми директивами Vue.js. Вот полный файл index.html.","type":"unstyled","key":"1rohq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"85dat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":2745,"style":"ITALIC"},{"length":33,"offset":2815,"style":"ITALIC"},{"length":49,"offset":2890,"style":"ITALIC"},{"length":60,"offset":2969,"style":"ITALIC"},{"length":27,"offset":3270,"style":"ITALIC"},{"length":74,"offset":3343,"style":"ITALIC"},{"length":94,"offset":3554,"style":"ITALIC"},{"length":103,"offset":3919,"style":"ITALIC"},{"length":97,"offset":4133,"style":"ITALIC"},{"length":92,"offset":4342,"style":"ITALIC"},{"length":55,"offset":4620,"style":"ITALIC"},{"length":91,"offset":4802,"style":"ITALIC"},{"length":55,"offset":5092,"style":"ITALIC"},{"length":112,"offset":5275,"style":"ITALIC"},{"length":16,"offset":5514,"style":"ITALIC"},{"length":92,"offset":5573,"style":"ITALIC"},{"length":17,"offset":5821,"style":"ITALIC"},{"length":77,"offset":5883,"style":"ITALIC"},{"length":114,"offset":6367,"style":"ITALIC"}],"text":"\n\n\n\n \n \n \n ChatApp_Socket\n \n\n\n\n

\n\n

\n {{user.username}} {{user.type}}\n

\n\n

Enter your username

\n \n

My Chat App {{connections}} connections

{{typing}} is typing

\n \n {{message.message}}\n :{{message.user}}\n \n

\n\n

\n \n

\n\n\n\n\n\n\n\n\n","type":"blockquote","key":"ca9jo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9nupl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Заключение.","type":"header-two","key":"d10ak"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2foei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете улучшить код, добавить авторизацию, группы, приватные беседы и управление базой данных, либо отслеживать все изменения через управление сеансами.","type":"unstyled","key":"e3b6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e2gc5"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":21,"offset":0}],"inlineStyleRanges":[],"text":"Код проекта на GitHub .","type":"unstyled","key":"9j5d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bj1hr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDE4F Спасибо за прочтение! \uD83D\uDE4F","type":"header-two","key":"3hgp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9l4i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":158,"offset":0,"style":"ITALIC"}],"text":"Надеюсь, эта статья была вам полезна. Если у вас есть вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне становиться лучше.","type":"unstyled","key":"kkph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"flvjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"⚠️ Внимание! ⚠️","type":"header-two","key":"5u14l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5thdd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":188,"offset":0,"style":"ITALIC"}],"text":"Если при чтении этой статьи вы обнаружите какие-либо ошибки в программном коде или грамматике, битые ссылки, пожалуйста, дайте мне знать. Заранее приношу извинения за возможные неудобства.","type":"unstyled","key":"42nsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"DJkUCAJ9Jtdqel2VMUxC"}],"entityMap":{"0":{"data":{"url":"https://nodejs.org/en/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://expressjs.com/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://socket.io/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://vuejs.org/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://getbootstrap.com/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://github.com/socketio/socket.io-client"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://socket.io/docs/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"url":"https://github.com/drylikov/ChatAppWithVue_Socket.io"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}

Enter your username

{{username}}

My Chat App {{connections}} connections

Enter your username

{{username}}

My Chat App {{connections}} connections