鸿蒙HarmonyOS实战案例：实现一个基于鸿蒙API的HTTP服务器 ...

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

看到这个标题，可能有的小伙伴会有一些疑问：
“鸿蒙API从9到12我都翻烂了，也没见提供HTTP服务器的接口啊”
“我BUG写得少，你可不要骗我”
的确，目前的鸿蒙API没有提供HTTP服务端的实现接口，但是我们知道，HTTP协议是基于TCP的，而鸿蒙API10提供了TCPSocketServer类，包含了如下几个关键接口：

1. listen(address: NetAddress): Promise<void>

复制代码

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

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

复制代码

订阅TCPSocketServer的毗连变乱，在新的客户端套接字毗连上以后，会触发callback回调，在回调中包含TCPSocketConnection对象，该对象就表示TCPSocket客户端与服务端的毗连。
TCPSocketConnection是服务端和客户端通讯的底子，提供了发送数据到客户端的方法：

1. send(options: TCPSendOptions): Promise<void>

复制代码

还提供了订阅客户端消息接收的变乱：

1. 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 ]表示可选的消息正文；因为消息分为哀求消息和应答消息，所以起始行又可以分为哀求行和状态行，如下所示：

1. start-line     = request-line / status-line

复制代码

固然，HTTP的协议还是有一点复杂的，这里就不睁开了，不过我们明白，只要我们按照协议格式构造出了哀求应答的文本，然后利用TCP协议作为传输层进行收发即可。
有了上面的API接口，加上HTTP协议的格式，就可以打造一个最简朴的HTTP服务端了。
2. 实现HTTP服务器示例

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

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

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

下面详细先容创建该应用的步骤。
步骤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';
6. let tcpServer: socket.TCPSocketServer = socket.constructTCPSocketServerInstance();
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()
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)
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)
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)
57.       Button(this.running ? "停止" : "启动")
58.         .onClick(() => {
59.           this.running = !this.running
60.           if (this.running) {
61.             this.start()
62.           } else {
63.             this.stop()
64.           }
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)
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')
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)
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)
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)
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)
153.     }
154.     .height('100%')
155.     .width('100%')
156.   }
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.     }
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.     })
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.   }
184.   stop() {
185.     tcpServer.off('connect')
186.   }
187. }
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>"
208.   let textEncoder = new util.TextEncoder();
209.   let contentBuf = textEncoder.encodeInto(bodyContent)
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
217.   return result
218. }
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）资料用来跟着学习黑白常有须要的。 
为了确保高效学习，发起规划清楚的学习路线，涵盖以下关键阶段：
 →【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料可以或许给各人带来帮助~

---

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

​
该路线图包含底子技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级装备开发，不仅增补了华为官网未涉及的办理方案
路线图得当人群：
IT开发职员：想要拓展职业边界
零底子小白：鸿蒙爱好者，希望从0到1学习，增长一项技能。
技术提拔/进阶跳槽：发展瓶颈期，提拔职场竞争力，快速把握鸿蒙技术
2.视频学习资料+学习PDF文档
HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​
 纯血版鸿蒙全套学习资料（面试、文档、全套视频等）
                   

​​​​鸿蒙APP开发必备

​​
总结
【纯血版鸿蒙全套最新学习资料】
总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提拔本身，才气在这个变革的时代中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。