如何使用 MessageWebSocket 进行连接 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

本主题向你展示 如何使用 Windows 运行时应用中的 MessageWebSocket 发送和接收整个数据消息。

MessageWebSocket 类提供了 WebSocket 协议基于消息的抽象。使用 MessageWebSocket 时,可以在单个操作中读取或写入整个 WebSocket 消息。相比之下,StreamWebSocket 允许使用每个读取操作读取消息各部分,而不是要求在单个操作中读取整个消息。

MessageWebSocket 通常用于消息不是非常大的情况。UTF-8 和二进制文件均受支持。对于 UTF-8 消息,必须使用 MessageWebSocket。因为 StreamWebSocket 仅支持二进制消息。

先决条件

以下示例使用 JavaScript,且基于 WebSocket 示例。 有关创建使用 JavaScript 的 Windows 运行时应用的常规帮助,请参阅创建你的第一个使用 JavaScript 的 Windows 运行时应用。此外,在本主题中使用 JavaScript Promise 来完成异步操作。有关此编程模式的详细信息,请参阅在 JavaScript 中使用 Promise 进行异步编程

为了使你的 Windows 运行时应用能够使用网络,你必须设置在项目 Package.appxmanifest 文件中所需的任何网络功能。 如果你的应用需要作为客户端连接到 Internet 上的远程服务,则“Internet (客户端)”功能是必需的。如果应用需要作为客户端连接到家庭网络或工作网络上的远程服务,则“家庭/工作网络”****功能是必需的。

注意  在 Windows Phone 上,只存在一种网络功能(“Internet (客户端和服务器)”),该功能支持对该应用的所有网络访问。

 

有关详细信息,请参阅如何设置网络功能

使用 MessageWebSocket 发送数据

此部分中的代码将创建一个新 MessageWebSocket,连接到 WebSocket 服务器,然后将数据发送到服务器。在成功建立连接后,应用将等待调用 MessageWebSocket.MessageReceived 事件,从而指示已接收数据。

注意  你可能想要向用户显示消息或者包含已发生事件的日志(例如,发起连接或发生错误时)。

 

  • 打开 js 文件夹。打开你的 .js 文件并添加以下代码。

    function startSend() {
       if (!messageWebSocket) {
          var webSocket = new Windows.Networking.Sockets.MessageWebSocket();
          // MessageWebSocket supports both utf8 and binary messages.
          // When utf8 is specified as the messageType, then the developer
          // promises to only send utf8-encoded data.
          webSocket.control.messageType = Windows.Networking.Sockets.SocketMessageType.utf8;
          // Set up callbacks
          webSocket.onmessagereceived = onMessageReceived;
          webSocket.onclosed = onClosed;
    
          var serverAddress = new Windows.Foundation.Uri(document.getElementById("serverAddress").value);
    
          try {
             webSocket.connectAsync(serverAddress).done(function () {
             messageWebSocket = webSocket;
             // The default DataWriter encoding is utf8.
             messageWriter = new Windows.Storage.Streams.DataWriter(webSocket.outputStream);
             messageWriter.writeString(document.getElementById("inputField").value);
             messageWriter.storeAsync().done("", sendError);
    
          }, function (error) {
             // The connection failed; add your own code to log or display 
             // the error, or take a specific action.
             });
          } catch (error) {
             // An error occurred while trying to connect; add your own code to  
             // log or display the error, or take a specific action.
          }
    
       }
       else {
          // The connection already exists; go ahead and send the message.
          messageWriter.writeString(document.getElementById("inputField").value);
          messageWriter.storeAsync().done("", sendError);          
       }
    }
    

为 MessageWebSocket.MessageReceived 事件注册回调

发生 MessageWebSocket.MessageReceived 事件时,会调用所注册的回调并接收来自 MessageWebSocketMessageReceivedEventArgs 的数据。

  • 将以下代码添加到 .js 文件中。

    function onMessageReceived(args) {
       // The incoming message is already buffered.
       var dataReader = args.getDataReader();
       // Use the dataReader to read data from the received message
    }
    

为 MessageWebSocket.Closed 事件注册回调

发生 MessageWebSocket.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 (messageWebSocket) {
          messageWebSocket.close();
       }
       messageWebSocket = null;
    }
    

摘要和后续步骤

在本教程中,我们已了解如何连接到 WebSocket 服务器以及如何使用 MessageWebSocket 发送和接收数据。

有关展示如何使用 WebSockets 发送和接收数据的完整示例,请参阅 WebSocket 示例

相关主题

其他

使用 JavaScript 中的 Promises 进行异步编程

使用 WebSocket 进行连接

创建你的第一个使用 JavaScript 的 Windows 运行时应用

如何使用 StreamWebSocket 进行连接

如何处理网络应用中的异常

如何设置网络功能

参考

MessageWebSocket

Windows.Networking.Sockets

示例

WebSocket 示例