Обучение разработке программного обеспечения

Создайте приложение для простого локального веб-чата с помощью WebSocket

Используя менее 50 строк скрипта в node.js и html5, создайте простое приложение для чата.

В этом нет ничего нового, WebSocket. Но просто для собственного обучения, прочитайте учебник в Интернете и создал приведенный ниже простой чат, просто используя Node.js и HTML5.

Вы можете получить код ниже.



GitHub - elye / demo_nodejs_websocket: Demo Node.js с websocket позволяет использовать несколько веб-клиентов…
Demo Node.js с websocket позволяет взаимодействовать нескольким веб-клиентам - GitHub - elye / demo_nodejs_websocket: Демо… github.com



Запуск его

В папке server просто запустите и установите npm install, чтобы загрузить все пакеты.

После этого просто запустите node index.js, чтобы запустить сервер локально (используя порт localhost:8082)

Чтобы узнать все о Node.js, вы можете проверить это ниже.



Настройка развертываемой платформы Node.js
Знайте, что требуется, помимо изучения node.js levelup.gitconnected.com



Затем запустите index.html (в папке webclient) на двух разных страницах браузера в качестве клиентов. Затем вы можете начать общение между двумя клиентами, как в демонстрации, показанной выше.

Объяснение позади

WebSocket - это новый протокол, представленный в 2008 году, который позволяет использовать два способа связи (клиент-сервер и сервер-клиент). По умолчанию он поддерживается в HTML5.

Давайте посмотрим, как он настроен.

На сервере

Здесь мы используем node.js.

Для node.js. существует множество пакетов WebSocket. Чаще всего используется ws. Просто нужно установить с помощью npm install ws

В коде просто используйте

const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8082 });

Проверить, установлено ли соединение

wss.on("connection", ws => {
   // Do something with ws
}

Обратите внимание, что ws - это отдельные клиентские подключения.

Чтобы отправить сообщение всем другим клиентам, кроме отправляющего клиента

ws.onmessage = ({data}) => {
  wss.clients.forEach(function each(client) {
  if (client !== ws && client.readyState === WebSocket.OPEN) {
    client.send(`${data}`);
  }
});

Мы также можем определить, что конкретный клиент закрыл соединение (т.е. страница закрыта), используя

ws.onclose = function() {
  console.log(`Client ${ws.id} has disconnected!`);
};

В веб-клиенте

Здесь мы просто используем обычный html5.

В разделе скриптов, на всякий случай, хорошо бы проверить, поддерживает ли браузер WebSocker. Если он доступен, мы можем создать его экземпляр.

if ("WebSocket" in window) { 
  let ws = new WebSocket("ws://localhost:8082");
  // Then only do something with ws
}

Затем мы можем определить, подключен ли он

ws.onopen = function() {
  console.log("Connected to Server");
};

Мы можем отправлять сообщения на сервер

ws.send(messageBox.value);

Мы можем проверить, получили ли мы какое-либо сообщение

ws.onmessage = function ({data}) {
  showMessage(`YOU: ${data}`);
};

И мы можем обнаружить, что сервер закрыл соединение

ws.onclose = function() {
   // Do something on close
};

Вот и все. Относительно просто.

Мобильная ссылка

Если вас интересует реализация клиента для iOS и Android, см.



Создание простого приложения для чата для Android
Использовать WebSocket для создания приложения для чата очень просто medium.com





Простое приложение для чата для iOS в 50 строках кода
Чтобы завершить мою коллекцию простого чата для iOS, Android и в Интернете через WebSocket medium.com



Ссылка

Особая благодарность приведенным ниже ссылкам