【案例共创】基于华为开发者空间的车路云监控中心：智能网联小车实时数据可视化系统实现-优快云博客

1 概述

本案例由开发者：乐知行科技有限公司提供

1.1 案例介绍

本案例依托华为开发者空间提供的cli工具包实现反向代理，将Web界面部署到服务器上搭建车路云监控系统。用户可通过专属链接访问对应网址，实现对车路云协同场景的广域网远程监控。技术层面，该系统核心采用HTML与Node.js搭建，本地反向代理负责请求转发与处理，确保界面呈现与数据处理的稳定运行。通过这种架构，既保留了本地开发的灵活性，又实现了服务的远程可访问性。功能上，服务器聚焦实时数据展示，可动态呈现智能小车相关的多类关键数据，具体包括小车的雷达数据、小车传感器数据，以及路端设备数据（红绿灯状态、交通标志信息、建筑灯光状态、ETC数据等），为车路协同场景下的监控与管理提供直观数据支撑。从实践价值来看，通过该案例的搭建与应用，学生能够深入学习车路云协同的核心逻辑与网络部署知识，清晰了解智能小车的各项功能，进而系统掌握与智能小车相关的各类技术，为后续深入研究智能交通领域奠定基础。

1.2 适用对象

l 企业

1.3 案例时间

本案例总时长预计40分钟。

1.4 案例流程

7db64ad169fd4cfa89c1ac3d2d06ef6e

说明：

① 开通开发者空间，创建云开发环境并进行操作。

② 进行云开发环境cli配置。

③ 建立初始22端口隧道，连接到远程开发环境。

④ 启动web服务，建立新的隧道并在本地浏览器访问到远端web服务。

⑤ 启动智能联网小车。

⑥ 数据回传，在web界面监控设备数据。

2 云开发环境创建

2.1进入云开发环境

面向广大开发者群体，华为开发者空间提供可随时访问的“开发平台”、丰富的“预配置工具集合”及灵活调用的“场景化资源池”，开发者可开箱即用，快速体验华为根技术与资源。开发者登录华为云账号后，可直接进入华为开发者空间开发平台界面，点击“云开发环境”即可进入对应页面。

注：首次进入云开发环境需签署协议，勾选协议后点击【进入】即可。
云开发环境管理页面如下：

c258518167d34acca9b1d329c9d43d6f

2.2云开发环境创建

在云开发环境页面，点击【新建云开发环境】弹出新建云开发环境配置窗口，按照要求输入【环境名称】、【开放端口（可选）】、【默认账号】、【密码】等，点击【确认】。

b29365c2a9ad4ab6a4d364efe70b68cc

环境名称(必填)：自定义，可包含数字、字母、下划线，长度不超过15个字符，不能以数字开头。开放端口(可选)：非必填，默认22端口，可代理的端口范围 8080-8089。(本案例需要打开8080端口)
默认账号(必填):默认为developer，可自定义，4~16个英文小写字母，不可使用系统保留的用户名root、agent。密码(必填):自定义，8~32个字符,至少包含以下字符中的3种：大写字母、小写字母、数字和特殊字符，特殊字符仅支持~!@#$%^*-_=+?

创建成功后点击开机即可：

771d97e23ec34441a73283af8fdbf7d5

3 云开发环境配置

3.1 安装cli工具包

hdspace.exe是一款为开发者设计的cli工具包，开发者可以通过hdspace.exe完成开发者空间云开发环境在PC端的创建和管理，并且开发者通过该工具可以建立与云开发环境的隧道，进而实现对云开发环境的远程操作(上传下载文件、编码编译执行等)。

1.下载

在Web端创建的云开发环境上点击【远程连接】-【立即下载】，将cli工具包下载到本地。

decabcde4bb54dc995581b8c0914e802

2. 配置环境变量

以Windows11为例，在搜索栏搜索环境变量，或者在控制面板中找到环境变量，点击系统变量中的path，新增环境变量。
把hdspace.exe文件所在目录，添加到新增的环境变量中并保存确认。如下图所示：

403b23695dc94099bc1de4fe8f1169f4

3.确认cli工具包安装成功

进入终端执行命令hdspace，查看安装结果。

hdspace

显示如下，则为安装成功。

8251bfd97f58482fb28b5f9b0818844e

至此，已经显示hdspace安装完成。

3.2 配置本地环境

在使用cli工具包创建和管理云开发环境之前，需要先在本地配置用户的AK/SK，获取用户远程操作权限，保证操作的安全性

1. 获取AK/SK

AK是Access Key（访问密钥）的缩写, 用于标识用户身份的唯一ID, 通常公开传输;
SK是Secret Key（秘密密钥）的缩写，用于生成请求签名的保密密钥，仅用户和服务端持有。其核心功能是通过对称加密机制验证请求发送者的合法性，防止未授权访问。
开发者配置AK/SK，等同于在cli中进行身份信息认证，从而可以在cli端对云开发环境进行操作。
可以参考获取AK/SK文档。

打开下载文件，AK/SK如下展示：

f64ca0cf07234ce0a1e3c706d36c8202

2. .配置AK/SK，输入命令

hdspace config

按照提示输入AK/SK，注意：SK输入后并不会回显，并且需要再次输入确认。

72abe72b8a2341b4a9e9036276b5bd20

如上图显示，则配置AK/SK成功。

4 创建隧道链接

4.1创建链接远程环境22端口的隧道，用于本地ssh客户端登录远程环境

在终端输入hdspace devenv list 查询ID。

78e58d8ce9434487bc693c288b4f8554

通过如下命令行建立链接远程环境22端口的隧道，与本地10024端口连接。用于本地ssh客户端与远程环境连接。

hdspace devenv start-tunnel --instance-id=eccdec47998c4c8eb162317190042ad4 --name=llzx --remote-port=22 --local-port=10024

c63153ddf3984a46bd1849386eccce8f

打开远程链接软件，输入ip地址（127.0.0.1）、云开发环境用户名、通道链接的端口号（这里是10024），输入密码登录云开发环境。

6eaa5bd7173d42a3a38afd7e53c77b9b

在云开发环境部署车路云监控中心web服务，下载web服务代码：

git clone https://gitee.com/lezhixing-chongqing/huawei.git

4115772e3bdb41d3ac1c07a47a1df6ef

修改app.js文件中的端口和地址：

fd452cd8efb94f30bbb18fdd4638cf6b

然后在shell界面输入node app.js就可以启动web服务。

18031ae42bef433ea84d68236cb0151d

4.2 创建链接远程环境8080端口的隧道，用于本地访问远程环境部署的web服务

新打开一个基于hdspace.exe文件夹目录下面的终端，输入hdspace devenv list 查询ID。

c6b924381dc24612966059753079dd31

建立链接远程环境8080端口的隧道，与本地10025端口连接。用于本地浏览器访问服务器的端口。

hdspace devenv start-tunnel --instance-id=eccdec47998c4c8eb162317190042ad4 --name=llzx --remote-port=8080 --local-port=10025

658f868ceca74610bd256007056db40f

打开本地浏览器在浏览器中输入127.0.0.1:10025，就可以打开华为开发者空间，车路云控制中心。

43f77a992b8a439e9aee2637de57ff6f

5 启动小车上传数据

在本地电脑中找到一个保存代码的文件，然后打开文件夹的终端，就可以下载模拟代码包。

git clone https://gitee.com/lezhixing-chongqing/monishuju.git

41f46cbafbf34cf6a786940e3d930480

343197ed3fcc42f586ab78e5c0111e07

在本地cmd终端输入如下命令启动智能小车：

python3 send_to_5h_web.py
Python3 Upload video.py

注：如上命令要在CMD终端执行，在IDE上执行会失效。

成功模拟发送小车数据

42bd790012ea4d72b4c7253eb48deec3

成功发送摄像头数据

1e4864e1ee994d908501e62e66e36d0f

6 最终效果

b6cfa9233aca4fa1bfa9371021df41ea

华为云开发者空间车路云控制中心分别能够监控智能智能小车定位信息，车身信息，摄像仪画面以及路端设备红绿灯、交通标志、etc、建筑灯光等实时信息。