Подключение с помощью StreamWebSocket (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

В этом разделе демонстрируется, как отправлять и получать потоки данных с помощью StreamWebSocket в приложении среды выполнения Windows.

Класс StreamWebSocket предоставляет абстракцию протокола WebSocket на основе сообщений. Это полезно в сценариях, где необходимо передавать большие файлы (такие как фотографии или фильмы) между клиентом и сервером. Сервер должен поддерживать протокол WebSocket. Использование StreamWebSocket позволяет считывать разделы сообщения при каждой операции чтения, не требуя чтения всего сообщения за одну операцию (как в случае с MessageWebSocket).

Класс StreamWebSocket поддерживает только двоичные сообщения. Для сообщений UTF-8 необходимо использовать MessageWebSocket.

Необходимые условия

В следующих примерах, основанных на примере WebSocket, используется JavaScript. Общую справку по созданию приложения среды выполнения Windows на JavaScript см. в разделе Создание первого приложения среды выполнения Windows на JavaScript. Для завершения асинхронных операций в этом разделе также используются объекты Promise в JavaScript. Подробнее об этой технике программирования см. в разделе об асинхронном программировании на JavaScript с использованием объектов Promise.

Чтобы подготовить приложение среды выполнения Windows для работы в сети, необходимо настроить соответствующие возможности сетевого подключения в файле проекта Package.appxmanifest. Если приложению нужно подключаться в качестве клиента к удаленным службам в Интернете, для этого требуется возможность Интернет (клиент). Если же нужно подключаться в качестве клиента к удаленным службам в домашней или рабочей сети, требуется возможность Домашняя/рабочая сеть.

Примечание В Windows Phone имеется только один тип возможности сетевого подключения — Интернет (клиент и сервер). Он обеспечивает приложению все формы доступа к сети.

Подробнее: Как задать возможности сетевого подключения.

Инструкции

1. Создание объекта StreamWebSocket для отправки и получения данных

Код в этом разделе создает новый StreamWebSocket, подключается к серверу WebSocket, отправляет на него данные и ожидает ответа.

Сначала мы проверяем допустимость адреса URI сервера. Затем мы подключаемся к серверу WebSocket через этот URI и ожидаем ответа от сервера.

Сначала проверяется входной адрес URI, чтобы убедиться, что пользователь предоставил допустимый адрес URI. Этот этап не нужен, если приложению уже известен URI для сервера WebSocket.

Исключение создается, если конструктору объекта Windows.Foundation.Uri передается недопустимая строка для универсального кода ресурса (URI).

В JavaScript нет метода для преобразования строки в код URI. В этом случае для перехвата исключения поместите код, в котором создается URI, в блок try/catch.

В примере также проверяется схема HTTP в URI (WS или WSS), поскольку StreamWebSocket поддерживает только эти две схемы.

Если пользователь ввел допустимый URI, то приложение может подключиться к серверу WebSocket для отправки и получения данных.

Исключения из-за сетевых ошибок (потеря подключения, ошибки подключения, ошибки HTTP-сервера и др.) могут возникать в любое время. Из-за таких ошибок создаются исключения. Если ваше приложение не обрабатывает исключение, то среда выполнения может завершить работу приложения. При вызове большинства асинхронных сетевых методов вы должны указать код для обработки исключений. Иногда, когда возникает исключение, можно снова вызвать сетевой метод и устранить проблему. В других случаях приложение должно быть готово продолжить работу без подключения к сети, используя данные из кэша. Подробнее об обработке сетевых исключений: Обработка исключений в сетевых приложениях.

Примечание Можно отображать сообщения для пользователя или вести журнал возникновения определенных событий (таких как установление соединения или возникновение ошибки). Пример вызывает функцию displayStatus, которую будет необходимо реализовать в приложении.

Примечание Функции writeOutgoing() и readIncoming() для выполнения операций записи и чтения будут определены на последующих этапах.

Откройте папку js. Откройте используемый вами JS-файл и добавьте в него следующий код.


// Define some variables we will use
var streamWebSocket;
var dataWriter;
var dataReader;
// The data to send
var data = "Hello World";
var countOfDataSent;
var countOfDataReceived;

function start() {
   if (streamWebSocket) {
      // The WebSocket is already running. Go ahead and immediately return,  
      // or display a message that indicates that it is running.
      return;
   }

   var webSocket = new Windows.Networking.Sockets.StreamWebSocket();
   webSocket.onclosed = onClosed;

   // WebSocket server to test connections
   // If the scheme is wss:, then the server will
   // echo back what it receives
   var uriString = "wss://echo.websocket.org";

   // We might get the uriString from the user so
   // we need to check that we have a valid URI
   var serverUri;
   try {
      serverUri = new Windows.Foundation.Uri(uriString);
      }
   catch (Exception) {
      displayStatus("Invalid URI, please re-enter a valid URI.");
      return;
   }

   if (serverUri.schemeName != "ws" && serverUri.schemeName != "wss") {
      displayStatus("Only 'ws' and 'wss' schemes supported. Please re-enter URI");
      return;
   }

   // Asynchronous networking methods can throw execptions
   webSocket.connectAsync(uri).done(function () {
      diaplayStatus("Connected");

      streamWebSocket = webSocket;
      dataWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
      dataReader = new Windows.Storage.Streams.DataReader(webSocket.inputStream);
      // When buffering, return as soon as any data is available.
      dataReader.inputStreamOptions = Windows.Storage.Streams.InputStreamOptions.partial;
      countOfDataSent = 0;
      countOfDataReceived = 0;

      // Continuously send data to the server
      writeOutgoing();

      // Continuously listen for a response
      readIncoming();

   }, function (error) {
      var errorStatus = Windows.Networking.Sockets.WebSocketError.getStatus(error.number);
      if (errorStatus === Windows.Web.WebErrorStatus.cannotConnect ||
         errorStatus === Windows.Web.WebErrorStatus.notFound ||
         errorStatus === Windows.Web.WebErrorStatus.requestTimeout) {
         displayStatus("Cannot connect to the server");
      } else {
         displayStatus("Failed to connect: " + getError(error));
      }
   });
}

2. Отправка исходящих данных

Код в этом разделе позволяет вашему объекту WebSocket отправлять данные на сервер.

Примечание Функция writeError() будет определена на последующем этапе.

Добавьте следующий код в ваш файл JS, чтобы определить функцию writeOutgoing().

function writeOutgoing() {
   try {
      var size = dataWriter.measureString(data);
      countOfDataSent += size;

      dataWriter.writeString(data);
      dataWriter.storeAsync().done(function () {
         // Add a 1 second delay so the user can see what's going on.
         setTimeout(writeOutgoing, 1000);
      }, writeError);
   }
   catch (error) {
      displayStatus("Sync write error: " + getError(error));
   }
}

3. Чтение входящих данных

Код в этом разделе позволяет вашему объекту WebSocket читать данные с сервера.

Примечание Функция readError() будет определена на последующем этапе.

Добавьте следующий код в ваш файл JS, чтобы определить функцию readIncoming().


function readIncoming(args) {
   // Buffer as much data as you require for your protocol.
   dataReader.loadAsync(100).done(function (sizeBytesRead) {
      countOfDataReceived += sizeBytesRead;

      var incomingBytes = new Array(sizeBytesRead);
      dataReader.readBytes(incomingBytes);

      // Do something with the data.
      // Alternatively you can use DataReader to read out individual booleans,
      // ints, strings, etc.

      // Start another read.
      readIncoming();
   }, readError);
}

4. Добавление кода обработки ошибок

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

Добавьте код в ваш JS-файл, чтобы определить функции writeError() и readError(), регистрирующие ошибки записи и чтения (или выполняющие другие действия) соответственно. Используемая вами реализация может меняться.
```
function writeError(error) {
   // Add your code to handle write errors.
}

function readError(error) {
   // Add your code to handle read errors.
}
```

5. Регистрация события обратного вызова StreamWebSocket.Closed

При возникновении события StreamWebSocket.Closed вызывается зарегистрированный обратный вызов, который получает данные из WebSocketClosedEventArgs для закрытия подключения.

Добавьте следующий код в ваш файл JS.

function onClosed(args) {
   // You can add code to log or display the code and reason
   // for the closure (stored in args.code and args.reason)
   if (streamWebSocket) {
      streamWebSocket.close();
   }
   streamWebSocket = null;
}