【原】使用 SAP ABAP Webdynpro 实现 ABAP Push Channel 的 Web Socket 客户端

本系列前三篇文章，笔者向大家介绍了基于 ABAP Push Channel(简称 APC)的 TCP Socket 服务器端和客户端的编程，以及 Web Socket 的服务器端实现。

• 使用 ABAP 实现 TCP Socket 编程 (1) - 客户端部分的实现
• 使用 ABAP 实现 TCP Socket 编程 (2) - 服务器端部分的实现

• 使用 ABAP 实现 Web Socket 编程 - 服务器端部分的实现

上一篇文章提到，SAP 发布了一个标准的 ABAP Webdynpro 应用 WDR_TEST_APC_WSP，可以用来作为 Web Socket 客户端使用，测试我们通过 APC 实现的 Web Socket 服务器端。

正好笔者之前写过一篇关于 ABAP Webdynpro 的文章：

SAP ABAP Webdynpro 还值得学吗？

在动手开发 SAP UI5 应用扮演 Web Socket 客户端角色之前，本文先来聊聊如何用 ABAP Webdynpro 技术，来实现一个 Web Socket 客户端，能够消费 APC 技术实现的 Web Socket 服务器端。

我们使用事务码 SE80 打开 ABAP Webdynpro WDR_TEST_APC_WSP，选择右键菜单 Test：

能看到如下的 HTML 页面。在 APC Application 字段里输入一个 Web Socket 客户端，比如前文实现的 YWSP_TEST, 点击 Connect 按钮，即可发起 Web Socket 连接请求。

这个连接逻辑通过 JavaScript 代码完成，实现在 ABAP Webdynpro 的 MAIN 视图里。

ABAP Webdynpro 里编写的JavaScript 代码，需要承载于一个容器之内。

这个容器就是 ABAP Webdynpro 用来实现 HTML 集成场景的控件：HTMLIsland.

HTMLIsland 控件允许开发者在 ABAP Web Dynpro 环境中嵌入自定义的 HTML、JavaScript 和 CSS 内容。该控件提供了一个桥梁，使得标准的 ABAP Web Dynpro 用户界面，能够与外部的 HTML 或者 JavaScript 代码结合，从而扩展了 Web Dynpro 的功能。

当 ABAP 开发者希望引入标准 Web Dynpro 控件之外的自定义组件时，例如当需要实现复杂的前端交互，或引入第三方的 JavaScript 库时，HTMLIsland 控件变得非常有用。它支持开发人员通过客户端脚本与 Web Dynpro 的上下文进行双向数据绑定，从而实现丰富的用户交互体验。

下图图例 3 所示的 HTMLSCRIPT, 即是图例2 HTMLIsland 控件的一个属性，里面可以编写在浏览器客户端执行的 JavaScript 代码。

双击图例 4 所示的 JavaScript 文件 test_web_sockets_wsp.js，能够查看到这些编写好的代码。

test_web_sockets_wsp.js 里定义了一个 JavaScript 对象，名称为 MySocket，包含了 connect 和 send 两个函数，分别作为 ABAP Webdynpro Connect 和 Send 按钮的处理函数，在这两个按钮被调用时触发。

在 JavaScript 里调用这两个函数的语法是 MySocket.connect 和 MySocket.send.

我们在 MAIN 视图里双击 CONNECT 这个 action：

能看到在 ABAP Webdynpro 运行环境里，触发 JavaScript 代码的实现方式为：

cl_wd_html_script_call=>new_call( )->variable( `MySocket`)->function( `connect`)->add_string(  l_url && l_url_parameter_str)->add_string( l_apc-apc_protocol)->add_boolean( l_use_pcp_library ) ).

我们可以在上图第 90 行的 ABAP 代码设置断点。然后回到 ABAP Webdynpro 应用，输入 Web Socket 服务器的名称 YWSP_TEST, 点击 Connect 按钮，上图的 ABAP 断点触发。

然后回到 ABAP Webdynpro 应用的浏览器窗口，按 F12 启动开发者工具，在 JavaScript 编写的 connect 函数的第一行设置断点。

接着在 ABAP 调试器里按 F8 结束执行，然后设置在 JavaScript connect 函数里的断点就触发了。

可以看出使用 JavaScript 代码向 Web Socket 服务器端发起连接请求，核心语句就一行：

this.websocket = new WebSocket(ws_url);

其中 WebSocket 是浏览器环境下全局对象 window 的一个标准属性。

WebSocket 属性提供了浏览器与服务器通过 Web Socket 进行实时通信的能力。使用该属性作为构造函数，开发者可以创建一个 WebSocket 对象，并与服务器进行交互。

这个 WebSocket 对象具有 EventTarget 这个 prototype，意味着它可以响应一些特定的事件，例如连接成功、收到消息、错误、连接关闭等。

ws_url 变量的值即 Web Socket 服务器地址，本例为 wss://<host name>:44355/sap/bc/apc/sap/ywsp_test.

将 Web Socket 服务器端的实现名称 YWSP_TEST 传入方法 cl_apc_ws_utility=>get_access_url，就可以得到这个 url 了。

Web Socket 连接成功建立之后，将连接句柄存储到 this.websocket 中。

this.websocket = new WebSocket(ws_url);

同理，在 ABAP Webdynpro 页面输入值，点击 Send 按钮后，只需要调用连接成功后保存到 this.websocket 变量的 send 方法，即可将输入值通过 Web Socket 连接，发送给服务器端。

以上就是使用 ABAP Webdynpro 实现 Web Socket 客户端的详细开发步骤。

有了本文的基础，本系列下一篇文章，会介绍使用 SAP UI5 开发 Web Socket 客户端的步骤。