Не понимаю как вообще подключатся к сокетам?

Подключение к сокетам в Vue.js может быть реализовано с использованием WebSocket API и сторонней библиотеки, такой как Socket.io или Vue-Socket.io.

WebSocket API - это протокол, который обеспечивает постоянное двустороннее соединение между клиентом и сервером. Он позволяет отправлять данные между клиентом и сервером в режиме реального времени.

Для начала вам необходимо настроить серверную часть, которая будет обрабатывать сокет-запросы от клиента. Сервер должен поддерживать протокол WebSocket и иметь соответствующие маршруты и обработчики для взаимодействия с сокетами.

Далее, для подключения к сокетам в вашем Vue.js приложении, вы можете использовать одну из вышеупомянутых библиотек. Socket.io - это библиотека, которая предоставляет простой и удобный интерфейс для работы с сокетами.

Установите пакет socket.io через npm:

npm install socket.io --save

Затем в вашем Vue.js приложении вы можете создать экземпляр Socket.io и подключиться к серверу с помощью метода connect:

import io from 'socket.io-client';

const socket = io('http://your-server-url');

Вы можете использовать обработчики событий, чтобы слушать события, отправленные с сервера, и реагировать на них в вашем приложении Vue.js. Например:

socket.on('message', (data) => {
  console.log(data);
});

Вы также можете отправлять события на сервер с помощью метода emit:

socket.emit('chat-message', 'Hello, server!');

Серверная часть, настроенная для обработки сокет-запросов, должна иметь соответствующие обработчики для каждого события, которое вы отправляете с клиента. Например, обработчик на сервере может выглядеть следующим образом:

io.on('connection', (socket) => {
  socket.on('chat-message', (message) => {
    console.log('Received message:', message);

    // Отправка сообщения всем клиентам, подключенным к сокету
    io.emit('message', message);
  });
});

Это основной пример того, как можно подключиться к сокетам в Vue.js с использованием библиотеки Socket.io. Однако, в зависимости от требований вашего проекта и структуры вашего приложения, код может немного отличаться. Учтите, что необходимо обрабатывать разрыв соединения и другие возможные ошибки, чтобы ваше приложение было надежным и стабильным.