鸿蒙HarmonyOS NEXT（开发进阶）实现一个基于鸿蒙API的HTTP服务器实践案例
鸿蒙NEXT开发实战往期必看文章：一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常详细的” 鸿蒙HarmonyOS Next应用开发学习门路！（从零底子入门到精通）
HarmonyOS NEXT应用开发案例实践总结合（连续更新......）
HarmonyOS NEXT应用开发性能优化实践总结（连续更新......）
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版本的消息格式如下所示：
HTTP-message = start-line CRLF
*( field-line CRLF )
CRLF
[ 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服务器示例
本示例运行后的界面如下所示：
https://img-blog.csdnimg.cn/img_convert/577c2b1b3c664f6b8cce33c3a45ebc96.jpeg
输入要监听的端口，然后单击“启动”按钮，即可在127.0.0.1上启动对端口的TCP协议监听了。然后在哀求地址栏输入服务端地址，再单击“哀求”按钮，既可哀求刚创建的HTTP服务器，结果如图所示：
https://img-blog.csdnimg.cn/img_convert/b36621772fc1fbda955ecf0e330d6892.jpeg
这里实现的HTTP服务器是这样的，吸收到客户端的哀求后，会把客户端发送的信息作为网页的内容反馈给客户端，也就是上图中看到的这些内容：
https://img-blog.csdnimg.cn/img_convert/a076a5a562e21049d8e3efb32d3f876c.png
下面详细介绍创建该应用的步调。
步调1：创建Empty Ability项目。
步调2：在module.json5配置文件加上对权限的声明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
] 这里添加了获取互联网信息的权限。
步调3：在Index.ets文件里添加如下的代码：
import { socket } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { util } from '@kit.ArkTS';
import { webview } from '@kit.ArkWeb';
let tcpServer: socket.TCPSocketServer = socket.constructTCPSocketServerInstance();
@Entry
@Component
struct Index {
@State message: string = '最简单的HTTP服务器示例';
@State port: number = 8080
@State running: boolean = false
@State msgHistory: string = ''
@State webUrl: string = "https://developer.huawei.com/"
scroller: Scroller = new Scroller()
webScroller: Scroller = new Scroller()
controller: webview.WebviewController = new webview.WebviewController()
build() {
RelativeContainer() {
Text(this.message)
.id('txtTitle')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.alignRules({
middle: { anchor: '__container__', align: HorizontalAlign.Center },
top: { anchor: '__container__', align: VerticalAlign.Top }
})
.padding(10)
Text("端口")
.id('txtPort')
.fontSize(15)
.height(40)
.alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
top: { anchor: 'txtTitle', align: VerticalAlign.Bottom }
})
.padding(10)
TextInput({ text: this.port.toString() })
.onChange((value) => {
this.port = parseInt(value)
})
.type(InputType.Number)
.width(80)
.height(40)
.id('txtInputPort')
.fontSize(15)
.alignRules({
left: { anchor: 'txtPort', align: HorizontalAlign.End },
top: { anchor: 'txtPort', align: VerticalAlign.Top }
})
.padding(10)
Button(this.running ? "停止" : "启动")
.onClick(() => {
this.running = !this.running
if (this.running) {
this.start()
} else {
this.stop()
}
})
.height(40)
.width(80)
.id('butRun')
.fontSize(15)
.alignRules({
right: { anchor: '__container__', align: HorizontalAlign.End },
top: { anchor: 'txtPort', align: VerticalAlign.Top }
})
.padding(10)
Scroll(this.scroller) {
Text(this.msgHistory)
.textAlign(TextAlign.Start)
.padding(10)
.width('100%')
.fontSize(12)
.backgroundColor(0xeeeeee)
}
.alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
top: { anchor: 'butRun', align: VerticalAlign.Bottom }
})
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(200)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
.padding(10)
.id('scrollHis')
Text("请求地址")
.id('txtUrl')
.fontSize(15)
.height(40)
.alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
top: { anchor: 'scrollHis', align: VerticalAlign.Bottom }
})
.padding(10)
TextInput({ text: this.webUrl.toString() })
.onChange((value) => {
this.webUrl = value
})
.height(40)
.id('txtInputWebUrl')
.fontSize(15)
.alignRules({
left: { anchor: 'txtUrl', align: HorizontalAlign.End },
top: { anchor: 'txtUrl', align: VerticalAlign.Top },
right: { anchor: 'butWeb', align: HorizontalAlign.Start }
})
.padding(10)
Button("请求")
.onClick(() => {
this.controller.loadUrl(this.webUrl)
})
.height(40)
.width(80)
.id('butWeb')
.fontSize(15)
.alignRules({
right: { anchor: '__container__', align: HorizontalAlign.End },
top: { anchor: 'txtUrl', align: VerticalAlign.Top }
})
.padding(10)
Scroll(this.webScroller) {
Web({ src: this.webUrl, controller: this.controller })
.padding(10)
.width('100%')
.backgroundColor(0xeeeeee)
.textZoomRatio(200)
}
.alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
top: { anchor: 'txtUrl', align: VerticalAlign.Bottom },
bottom: { anchor: '__container__', align: VerticalAlign.Bottom }
})
.backgroundColor(0xeeeeee)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
}
.height('100%')
.width('100%')
}
start() {
this.webUrl = "http://127.0.0.1:" + this.port.toString()
let listenAddr: socket.NetAddress = {
address: '0.0.0.0',
port: this.port,
family: 1
}
tcpServer.listen(listenAddr, (err: BusinessError) => {
if (err) {
this.msgHistory += "listen fail \r\n";
return;
}
this.msgHistory += "listen success \r\n";
})
tcpServer.on('connect', (clientSocket: socket.TCPSocketConnection) => {
clientSocket.on('message', (msgInfo: socket.SocketMessageInfo) => {
let requestMsg = buf2String(msgInfo.message)
this.msgHistory += requestMsg + "\r\n"
let resp = buildRespString(requestMsg)
clientSocket.send({ data: resp })
})
});
}
stop() {
tcpServer.off('connect')
}
}
//构造给客户端的应答内容
function buildRespString(content: string) {
let result: string = ""
let bodyContent = "<html>"
bodyContent += "<head>"
bodyContent += "<title>"
bodyContent += "HTTP服务器模拟"
bodyContent += "</title>"
bodyContent += "</head>"
bodyContent += "<body>"
bodyContent += "<h1>"
bodyContent += "浏览器发送的请求信息"
bodyContent += "</h1>"
bodyContent += "<pre><h2>"
bodyContent += content
bodyContent += "</h2></pre>"
bodyContent += "</body>"
bodyContent += "</html>"
let textEncoder = new util.TextEncoder();
let contentBuf = textEncoder.encodeInto(bodyContent)
result += "HTTP/1.1 200 OK \r\n"
result += "Content-Type: text/html; charset=utf-8 \r\n"
result += `Content-Length: ${contentBuf.length} \r\n`
result += "\r\n"
result += bodyContent
return result
}
//ArrayBuffer转utf8字符串
function buf2String(buf: ArrayBuffer) {
let msgArray = new Uint8Array(buf);
let textDecoder = util.TextDecoder.create("utf-8");
return textDecoder.decodeWithStream(msgArray)
} 步调4：编译运行，可以使用模拟器或者真机，由于当前还处于内测期间，只能使用模拟器。
步调5：详细的操作过程上面讲过了，就不再赘述了。
3. 关键功能分析
比较关键的代码如下：
tcpServer.on('connect', (clientSocket: socket.TCPSocketConnection) => {
clientSocket.on('message', (msgInfo: socket.SocketMessageInfo) => {
let requestMsg = buf2String(msgInfo.message)
this.msgHistory += requestMsg + "\r\n"
let resp = buildRespString(requestMsg)
clientSocket.send({ data: resp })
})
}); 这里连接后得到了clientSocket对象，然后继续订阅clientSocket对象的收到客户端消息变乱，把消息转换为字符串，然后写入到历史日记msgHistory里。这里buildRespString函数是创建返回给客户端的信息的，末了通过clientSocket的send方法发送给客户端。
固然本示例比较简单，但是具备了HTTP服务端的根本功能，可以吸收客户端的输入，而且可以对客户端的输入举行处理，末了再发送给客户端。
https://i-blog.csdnimg.cn/direct/aecd8e669e8141f7b75be983bfd94925.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]