На основе Electron + nodejs + апплет для реализации виджета заграждения (открытие)

Node.js внешний интерфейс WebSocket Electron

предисловие

Заграждение, популярный китайский термин, относится к субтитрам комментариев, которые появляются при просмотре видео в Интернете. Подобно критике, отображаемой между строк в романе, комментарии, плавающие по экрану в видео, называются заграждениями, что первоначально означало использование большого или малого количества артиллерии для обеспечения интенсивного обстрела. Экран пули, как следует из названия, относится к занавесу, образованному множеством пуль.Когда большое количество комментариев Tucao плывет с экрана, эффект выглядит как экран пули в летающей стрелялке.

Давным-давно шквал появлялся только на видео, и у многих вошло в привычку жаловаться при просмотре видео.

Позже шквал появлялся во все большем количестве мест. Бары, корпоративные ежегодные встречи, отраслевые саммиты, вечеринки в кампусе и другие сцены, везде, где есть большой экран, в основном может пригодиться заградительный огонь. Должен сказать, что во многих сценариях шквал — отличный артефакт.

Итак, в качестве интерфейса, как использовать инструмент заграждения вручную?

анализ спроса

Во-первых, проанализировать потребности:

Выше должны быть самые основные требования этого инструмента заграждения.

Технический отбор

Как видно из приведенных выше требований, нам, вероятно, нужна трехсторонняя разработка:

  • Отправитель: отсканируйте код для использования, запустите на мобильном телефоне пользователя, и апплет станет хорошим выбором.
  • Receiver: популярный в настоящее время Electron, работающий на ПК, может использовать интерфейсную технологию для создания кроссплатформенных настольных приложений.
  • Сервер: Между отправителем и получателем должен быть сервер для обработки данных. Тогда вам также может пригодиться nodejs.

Очевидно, что один интерфейс может выполнять всю вышеперечисленную разработку.

Общая схема архитектуры

总体架构图

Simple Websocket Server настроен

мы можем пройтиwsМодуль быстро создает службу веб-сокетов.

const WebSocket = require('ws');
 
const wss = new WebSocket.Server({ port: 8080 });
 
wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });
 
  ws.send('something');
});

Это всего лишь простейший пример службы веб-сокетов, подробности можно найти в документации по модулю ws. Далее будет специальный блог для объяснения серверной части.

разное

WeChat требует, чтобы все наши API и доменные имена были зарегистрированы, а протокол должен быть HTTPS или WSS. Если наши продукты необходимо окончательно запустить в онлайн-среду, нам необходимо подать заявку на доменное имя, регистрацию доменного имени и подать заявку на SSL-сертификат.

FreeSSL.orgЭто веб-сайт, который предоставляет бесплатное приложение для сертификата HTTPS, возможно, вы можете его использовать.

После того, как у вас есть доменное имя и сертификат, вам нужно настроить nginx, чтобы указанное доменное имя поддерживало протокол wss. Например, наш сервис работает на порту 8080, а имя нашего домена доступа — wss://danmu.xxx.com, тогда конфигурация nginx должна быть следующей:

server {
    listen 443;
    server_name danmu.xxx.com;

    ssl on;
    #ssl证书文件存放位置
    ssl_certificate   /ssl_cert/danmu.xxx.com.pem;
    ssl_certificate_key  /ssl_cert/danmu.xxx.com.key;
    
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Подробности можно посмотретьОфициальная документация сайта

Суммировать

Если есть какие-либо ошибки или упущения выше, пожалуйста, поправьте меня!

@Author: TDGarden

Категории