“一人一程”系列——【约球online】小程序技术选型及架构设计

背景

约球online是本人暑假做的一个约球微信小程序，主要功能是一对一约球、一对多广播等实用功能。目前该小程序已经发布，可以通过以下小程序码进行试玩。

微信小程序是大三有段时间接触的新技术，那时候小程序刚出来，我觉得很新鲜，就跟着视频学了点，不过那时候前后端技术不如现在，所以很多不太理解，两年后重操旧业，感觉容易上手的多。这是我第二次自己做整个网络项目，上一个项目还得追溯到大三暑假用ASP.Net做的武汉大学自行车路径规划网站（BikeMap），现在已经没有布在服务器上了。
本文主要讲这个小程序的技术选型和架构设计，具体代码也许以后会放到github中。

功能定位

项目之初要做功能定位，就是这个项目到底要实现哪些功能，会遇到什么主要的技术难题，这一步想的越清楚，后续工作量会相对减少。对于约球online小程序，功能定位首先是约球。约球的形式多种多样，可以是一个人发邀请函，其他人进行报名。这是传统的约球形式。但是约球online做了以下创新：

1. 使用地图展示用户
2. 实时性
3. 一对一发送约球邀请（可以接受也可以拒绝）
4. 一对多发送约球广播（公告作用）
5. 建立信用机制

第一点，一般的约球平台并不是以地图为载体，而约球online却是如此。用地图展示附近或全域用户，这是一种新的做法。
第二点，实时性体现在哪里？主要体现在对于在线用户，用户发出邀请，在线用户需要马上收到该消息。类似于QQ和微信的实时性。
第三点，一对一发邀请，这属于社交属性，一般的约球平台是无法查看附近用户的，但约球online恰恰是以用户为核心，打造类似社交平台的约球小程序。
第四点，一对多发广播，这类似于游戏中的公告栏，通知在线的用户，有哪些人发出了约球的消息，方便找到这个人。
第五点，非常与众不同的，这个小程序建立了信用机制，信用越好的用户可以有许多特权。主要体现在发出广播的保留时间更长，时间间隔更短。

技术选型

前端选择uni-app。 uni-app是用vue来写小程序、H5等前端代码，一套代码重复使用，只需要编译成微信小程序，就可以在开发工具中调试。

后端选择Node。 Node对于前端开发者比较好上手，其实就是js代码，有很多现成的包可以使用。同时，也使用了小程序云开发技术，使用了云函数、云数据库、云存储等功能。

数据库选择MongoDB。 因为这个数据库相对容易，且云数据库本身也是mongodb，这样不需要学多种数据库使用，节约时间。

架构设计

约球online小程序的整体架构如图所示。该小程序具有两个服务器，一个是微信小程序云开发提供的一系列后台开发资源与服务，包括：云函数、数据库、存储和云调用，减少微信小程序开发者后端的开发难度，将更多精力放在小程序的功能开发上。另一个服务器用的是腾讯云提供的云服务器，在上面搭建WebSocket服务，满足约球online小程序约球和广播的实时性。
小程序云开发用于存储用户的基本信息，包括昵称、头像、位置、支持的球队和球员信息、守约和失约次数等。当用户进入该小程序，首先要进行登录操作，会从后台拉取用户的信息。其次，各个页面基本会和后台进行交互，比如更新集合或者插入新记录。

前端和后端的实时消息收发机制是独立的一套体系，其流程如图所示。OnShow和onHide是小程序页面生命周期的一部分，分表表示页面显示和隐藏。在显示时，创建websocket长连接，然后发送上线通知。前后端的websocket都有会有消息监听机制，收到的消息可以判断消息的类型，以此来做不同事件的处理。当服务端接收到约球的消息时，会在在线用户长连接中根据_id查询指定的用户，并且把该消息发送给该用户，同时将消息存入数据库。如果无法查询到，表明用户已下线，会将消息存入数据库中。服务端设置了定时检查数据库消息的事件，间隔一定时间会检查在线用户是否有消息未接收，如果有，就将待转发的消息发送给该用户。
当用户接受或者拒绝该邀请，也会向服务器发送一种类型的消息，然后服务端会先判断回传用户是否在线，如果在线，就将数据库中该消息删除，同时发送用户的回复；如果离线，就会更新数据库中该消息记录的回复状态字段，待用户上线再回复。

小程序部分截图

结语

这次个人项目收获颇多，虽然不是本专业，但是很喜欢搞开发，所以做的很有动力。之后会讲一些技术细节。欢迎大家给这个小程序反馈~