devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS开发实战：实现一个基于鸿蒙API的HTTP服务器_鸿蒙socket on('message')有概率无法响应

作者：笔触狂放9 | 2024-08-17 11:19:40

赞

踩

鸿蒙socket on('message')有概率无法响应

目录

1. 鸿蒙HTTP服务器可行性分析

2. 实现HTTP服务器示例

3. 关键功能分析

最后

1. 鸿蒙HTTP服务器可行性分析

看到这个题目，可能有的小伙伴会有一些疑问：

“鸿蒙API从9到12我都翻烂了，也没见提供HTTP服务器的接口啊”

“我BUG写得少，你可不要骗我”

的确，目前的鸿蒙API没有提供HTTP服务端的实现接口，但是我们知道，HTTP协议是基于TCP的，而鸿蒙API10提供了TCPSocketServer类，包含了如下几个关键接口：

listen(address: NetAddress): Promise<void>

监听方法，绑定IP地址和端口，端口可以指定或由系统随机分配。成功调用该方法后，TCPSocketServer对象监听并接受与此套接字建立的TCPSocket连接。

on(type: 'connect', callback: Callback<TCPSocketConnection>): void

订阅TCPSocketServer的连接事件，在新的客户端套接字连接上以后，会触发callback回调，在回调中包含TCPSocketConnection对象，该对象就表示TCPSocket客户端与服务端的连接。

TCPSocketConnection是服务端和客户端通讯的基础，提供了发送数据到客户端的方法：

send(options: TCPSendOptions): Promise<void>

还提供了订阅客户端消息接收的事件：

on(type: 'message', callback: Callback<SocketMessageInfo>): void

在这个事件的callback回调里，包含了SocketMessageInfo参数，该参数的属性message就是客户端发送过来的消息。

通过上述几个接口，我们就可以在服务端开启TCP监听，并且处理客户端的连接和消息收发。

再来说一下HTTP协议，众所周知，HTTP协议是一个简单的请求响应协议，根据RFC 9112，HTTP协议1.1版本的消息格式如下所示：

  1.   HTTP-message = start-line CRLF
  2.                    *( field-line CRLF )
  3.                    CRLF
  4.                    [ message-body ]

其中，start-line表示起始行，CRLF表示回车换行符号，field-line表示首部字段行，*( field-line CRLF )说明首部字段可以是零个或者多个，最后的[ message-body ]表示可选的消息正文；因为消息分为请求消息和应答消息，所以起始行又可以分为请求行和状态行，如下所示：

start-line     = request-line / status-line

当然，HTTP的协议还是有一点复杂的，这里就不展开了，不过我们明白，只要我们按照协议格式构造出了请求应答的文本，然后使用TCP协议作为传输层进行收发即可。

有了上面的API接口，加上HTTP协议的格式，就可以打造一个最简单的HTTP服务端了。

2. 实现HTTP服务器示例

本示例运行后的界面如下所示：

cke_260763.jpg

输入要监听的端口，然后单击“启动”按钮，即可在127.0.0.1上启动对端口的TCP协议监听了。然后在请求地址栏输入服务端地址，再单击“请求”按钮，既可请求刚创建的HTTP服务器，效果如图所示：

cke_410364.jpg

这里实现的HTTP服务器是这样的，接收到客户端的请求后，会把客户端发送的信息作为网页的内容反馈给客户端，也就是上图中看到的这些内容：

cke_493678.png

下面详细介绍创建该应用的步骤。

步骤1：创建Empty Ability项目。

步骤2：在module.json5配置文件加上对权限的声明：

  1. "requestPermissions": [
  2.       {
  3.         "name": "ohos.permission.INTERNET"
  4.       }
  5.     ]

这里添加了获取互联网信息的权限。

步骤3：在Index.ets文件里添加如下的代码：

  1. import { socket } from '@kit.NetworkKit';
  2. import { BusinessError } from '@kit.BasicServicesKit';
  3. import { util } from '@kit.ArkTS';
  4. import { webview } from '@kit.ArkWeb';
  5.  
  6. let tcpServer: socket.TCPSocketServer = socket.constructTCPSocketServerInstance();
  7.  
  8. @Entry
  9. @Component
  10. struct Index {
  11.   @State message: string = '最简单的HTTP服务器示例';
  12.   @State port: number = 8080
  13.   @State running: boolean = false
  14.   @State msgHistory: string = ''
  15.   @State webUrl: string = "https://developer.huawei.com/"
  16.   scroller: Scroller = new Scroller()
  17.   webScroller: Scroller = new Scroller()
  18.   controller: webview.WebviewController = new webview.WebviewController()
  19.  
  20.   build() {
  21.     RelativeContainer() {
  22.       Text(this.message)
  23.         .id('txtTitle')
  24.         .fontSize(20)
  25.         .fontWeight(FontWeight.Bold)
  26.         .alignRules({
  27.           middle: { anchor: '__container__', align: HorizontalAlign.Center },
  28.           top: { anchor: '__container__', align: VerticalAlign.Top }
  29.         })
  30.         .padding(10)
  31.  
  32.       Text("端口")
  33.         .id('txtPort')
  34.         .fontSize(15)
  35.         .height(40)
  36.         .alignRules({
  37.           left: { anchor: '__container__', align: HorizontalAlign.Start },
  38.           top: { anchor: 'txtTitle', align: VerticalAlign.Bottom }
  39.         })
  40.         .padding(10)
  41.  
  42.       TextInput({ text: this.port.toString() })
  43.         .onChange((value) => {
  44.           this.port = parseInt(value)
  45.         })
  46.         .type(InputType.Number)
  47.         .width(80)
  48.         .height(40)
  49.         .id('txtInputPort')
  50.         .fontSize(15)
  51.         .alignRules({
  52.           left: { anchor: 'txtPort', align: HorizontalAlign.End },
  53.           top: { anchor: 'txtPort', align: VerticalAlign.Top }
  54.         })
  55.         .padding(10)
  56.  
  57.       Button(this.running ? "停止" : "启动")
  58.         .onClick(() => {
  59.           this.running = !this.running
  60.           if (this.running) {
  61.             this.start()
  62.           } else {
  63.             this.stop()
  64.           }
  65.  
  66.         })
  67.         .height(40)
  68.         .width(80)
  69.         .id('butRun')
  70.         .fontSize(15)
  71.         .alignRules({
  72.           right: { anchor: '__container__', align: HorizontalAlign.End },
  73.           top: { anchor: 'txtPort', align: VerticalAlign.Top }
  74.         })
  75.         .padding(10)
  76.  
  77.       Scroll(this.scroller) {
  78.         Text(this.msgHistory)
  79.           .textAlign(TextAlign.Start)
  80.           .padding(10)
  81.           .width('100%')
  82.           .fontSize(12)
  83.           .backgroundColor(0xeeeeee)
  84.       }
  85.       .alignRules({
  86.         left: { anchor: '__container__', align: HorizontalAlign.Start },
  87.         top: { anchor: 'butRun', align: VerticalAlign.Bottom }
  88.       })
  89.       .align(Alignment.Top)
  90.       .backgroundColor(0xeeeeee)
  91.       .height(200)
  92.       .scrollable(ScrollDirection.Vertical)
  93.       .scrollBar(BarState.On)
  94.       .scrollBarWidth(20)
  95.       .padding(10)
  96.       .id('scrollHis')
  97.  
  98.       Text("请求地址")
  99.         .id('txtUrl')
  100.         .fontSize(15)
  101.         .height(40)
  102.         .alignRules({
  103.           left: { anchor: '__container__', align: HorizontalAlign.Start },
  104.           top: { anchor: 'scrollHis', align: VerticalAlign.Bottom }
  105.         })
  106.         .padding(10)
  107.  
  108.       TextInput({ text: this.webUrl.toString() })
  109.         .onChange((value) => {
  110.           this.webUrl = value
  111.         })
  112.         .height(40)
  113.         .id('txtInputWebUrl')
  114.         .fontSize(15)
  115.         .alignRules({
  116.           left: { anchor: 'txtUrl', align: HorizontalAlign.End },
  117.           top: { anchor: 'txtUrl', align: VerticalAlign.Top },
  118.           right: { anchor: 'butWeb', align: HorizontalAlign.Start }
  119.         })
  120.         .padding(10)
  121.  
  122.       Button("请求")
  123.         .onClick(() => {
  124.           this.controller.loadUrl(this.webUrl)
  125.         })
  126.         .height(40)
  127.         .width(80)
  128.         .id('butWeb')
  129.         .fontSize(15)
  130.         .alignRules({
  131.           right: { anchor: '__container__', align: HorizontalAlign.End },
  132.           top: { anchor: 'txtUrl', align: VerticalAlign.Top }
  133.         })
  134.         .padding(10)
  135.  
  136.       Scroll(this.webScroller) {
  137.         Web({ src: this.webUrl, controller: this.controller })
  138.           .padding(10)
  139.           .width('100%')
  140.           .backgroundColor(0xeeeeee)
  141.           .textZoomRatio(200)
  142.       }
  143.       .alignRules({
  144.         left: { anchor: '__container__', align: HorizontalAlign.Start },
  145.         top: { anchor: 'txtUrl', align: VerticalAlign.Bottom },
  146.         bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
  147.       })
  148.       .backgroundColor(0xeeeeee)
  149.       .scrollable(ScrollDirection.Vertical)
  150.       .scrollBar(BarState.On)
  151.       .scrollBarWidth(20)
  152.  
  153.     }
  154.     .height('100%')
  155.     .width('100%')
  156.   }
  157.  
  158.   start() {
  159.     this.webUrl = "http://127.0.0.1:" + this.port.toString()
  160.     let listenAddr: socket.NetAddress = {
  161.       address: '0.0.0.0',
  162.       port: this.port,
  163.       family: 1
  164.     }
  165.  
  166.     tcpServer.listen(listenAddr, (err: BusinessError) => {
  167.       if (err) {
  168.         this.msgHistory += "listen fail \r\n";
  169.         return;
  170.       }
  171.       this.msgHistory += "listen success \r\n";
  172.     })
  173.  
  174.     tcpServer.on('connect', (clientSocket: socket.TCPSocketConnection) => {
  175.       clientSocket.on('message', (msgInfo: socket.SocketMessageInfo) => {
  176.         let requestMsg = buf2String(msgInfo.message)
  177.         this.msgHistory += requestMsg + "\r\n"
  178.         let resp = buildRespString(requestMsg)
  179.         clientSocket.send({ data: resp })
  180.       })
  181.     });
  182.   }
  183.  
  184.   stop() {
  185.     tcpServer.off('connect')
  186.   }
  187. }
  188.  
  189. //构造给客户端的应答内容
  190. function buildRespString(content: string) {
  191.   let result: string = ""
  192.   let bodyContent = "<html>"
  193.   bodyContent += "<head>"
  194.   bodyContent += "<title>"
  195.   bodyContent += "HTTP服务器模拟"
  196.   bodyContent += "</title>"
  197.   bodyContent += "</head>"
  198.   bodyContent += "<body>"
  199.   bodyContent += "<h1>"
  200.   bodyContent += "浏览器发送的请求信息"
  201.   bodyContent += "</h1>"
  202.   bodyContent += "<pre><h2>"
  203.   bodyContent += content
  204.   bodyContent += "</h2></pre>"
  205.   bodyContent += "</body>"
  206.   bodyContent += "</html>"
  207.  
  208.   let textEncoder = new util.TextEncoder();
  209.   let contentBuf = textEncoder.encodeInto(bodyContent)
  210.  
  211.   result += "HTTP/1.1 200 OK \r\n"
  212.   result += "Content-Type: text/html; charset=utf-8 \r\n"
  213.   result += `Content-Length: ${contentBuf.length} \r\n`
  214.   result += "\r\n"
  215.   result += bodyContent
  216.  
  217.   return result
  218. }
  219.  
  220. //ArrayBuffer转utf8字符串
  221. function buf2String(buf: ArrayBuffer) {
  222.   let msgArray = new Uint8Array(buf);
  223.   let textDecoder = util.TextDecoder.create("utf-8");
  224.   return textDecoder.decodeWithStream(msgArray)
  225. }

步骤4：编译运行，可以使用模拟器或者真机，因为当前还处于内测期间，只能使用模拟器。

步骤5：具体的操作过程上面讲过了，就不再赘述了。

3. 关键功能分析

比较关键的代码如下：

  1.     tcpServer.on('connect', (clientSocket: socket.TCPSocketConnection) => {
  2.       clientSocket.on('message', (msgInfo: socket.SocketMessageInfo) => {
  3.         let requestMsg = buf2String(msgInfo.message)
  4.         this.msgHistory += requestMsg + "\r\n"
  5.         let resp = buildRespString(requestMsg)
  6.         clientSocket.send({ data: resp })
  7.       })
  8.     });

这里连接后得到了clientSocket对象，然后继续订阅clientSocket对象的收到客户端消息事件，把消息转换为字符串，然后写入到历史日志msgHistory里。这里buildRespString函数是创建返回给客户端的信息的，最后通过clientSocket的send方法发送给客户端。

虽然本示例比较简单，但是具备了HTTP服务端的基本功能，可以接收客户端的输入，并且可以对客户端的输入进行处理，最后再发送给客户端。


最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~~

一、鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程

​

三、《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

四、大厂面试必问面试题

​

五、鸿蒙南向开发技术

​

六、鸿蒙APP开发必备

​

​


完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

                        

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/992606
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号