Реализовать простой чат WebSocket

WebSocket

Введение в веб-сокеты

WebSocket — это протокол, предоставляемый HTML5 для полнодуплексной связи по одному TCP-соединению. WebSocket упрощает обмен данными между клиентом и сервером, позволяя серверу активно передавать данные клиенту. В API WebSocket браузеру и серверу нужно выполнить только одно рукопожатие, и между ними может быть создано постоянное соединение, и может выполняться двусторонняя передача данных. В WebSocket API браузеру и серверу достаточно сделать рукопожатие, после чего между браузером и сервером формируется быстрый канал. Данные могут передаваться напрямую между ними.

Почему традиционный HTTP-протокол не может выполнять функции, реализуемые WebSocket? Это связано с тем, что протокол HTTP представляет собой протокол запроса-ответа, и браузер должен сначала отправить запрос на сервер, прежде чем сервер сможет ответить на запрос, а затем отправить данные в браузер. Другими словами, если браузер не делает активных запросов, сервер не может активно отправлять данные в браузер.

Web

мы сначала используемexpressСоздайте базовый сервер.

Создайтеindex.jsдокумент

var app = require('express')();
var http = require('http').createServer(app);

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

run node index.js, и откройте его в браузереhttp://localhost:3000, вы можете видеть, что доступ успешен

HTML

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

Исправлятьindex.js

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

Создайтеindex.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

Перезапустите приложение и обновите страницу, вы увидите изображение, как показано ниже.

Socket.io

вводитьsocket.io

npm install --save socket.io

Исправлятьindex.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  console.log('an user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

Исправлятьindex.html,существует</body>Добавьте следующий код ниже

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

Перезапустите приложение и обновите страницу, вы можете увидеть печать командной строки следующим образом.

Emitting event

Запускается, когда пользователь входит в поле ввода окна чата и отправляет егоemitсобытие, сервер прослушивает событие и отвечает соответствующим образом.

Исправлятьindex.html

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // 防止页面重新加载
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>

Сервер прослушивает это событие вindex.jsфайл добавить этот код

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

показать сообщение

Когда сервер получает сообщение, отправленное пользователем A, сервер повторно отправляет сообщение для получения клиентом, а клиент прослушивает событие и отображает сообщение, чтобы пользователи A, B и C могли получить сообщение.

Исправлятьindex.js

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

Исправлятьindex.html, чтобы отобразить сообщение

<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>

Перезапустите приложение и обновите страницу, вы можете открыть несколько страниц браузера для одновременного посещения.localhost:3000, вы можете испытать эффект простого чата.

установить псевдоним

Когда каждый пользователь входит, в качестве псевдонима пользователя генерируется случайное число, и вход пользователя в чат транслируется всем пользователям. Когда пользователь отправляет сообщение, псевдоним пользователя сращивается.

Исправлятьindex.js

io.on('connection', (socket) => {
  const nickname = 'user' + Math.ceil((Math.random() * 1000))
  socket.broadcast.emit('connection', nickname + ' connected')

  socket.on('chat message', (msg) => {
    io.emit('chat message', nickname + ': ' + msg)
  })
})

Исправлятьindex.html, мониторconnectionсобытие

<script>
    $(() => {
      const socket = io()
      $('form').submit((e) => {
        e.preventDefault()
        socket.emit('chat message', $('#m').val())
        $('#m').val('')
        return false
      });
      socket.on('chat message', (msg) => {
        $('#messages').append($('<li>').text(msg))
      })
      socket.on('connection', (msg) => {
        $('#messages').append($('<li>').text(msg))
      })
    });
  </script>

Перезапустите приложение и откройте несколько клиентов, вы можете увидеть следующие эффекты

использованная литература

Большинство случаев в этой статье происходят изsocket.ioДокументация по началу работыsocket.IO/индивидуальный запуск...

En. Wikipedia.org/wiki/Веб-соц…

Официальный сайт Ляо Сюэфэна WebSocket

Учебник для новичков WebSocket

Категории