后端工程师的前端之路系列--小程序学习

我是一名5+工作经验的后端程序员，但一直拥有一颗对前端向往的不死之心，在学校的时候，就开始学习css、js、juqery等技术栈，还不断的做一些小游戏，比如2048单机版、音乐盒子等，
后来就开始接触angular、react等前端框架，记得有段时间对react native也很痴迷，一直在图书馆看相关书籍，虽然没有什么成果，但当时也乐在其中。

前端之路

• 2016-2017 模仿2048小游戏
• 2017-2018 模仿网易云音乐h5页面
• 2018-2019 由于特殊原因停滞一年
• 2019-2020(上) APP说 一款关于APP推荐的网站(www.appshuo.club)
• 2019-2020（下）APP说 APP版(flutter开发)
• 2020-2021(上) 模糊笔记 一款记录每个城市雾霾的网站(模糊笔记网站链接)
• 2020-2021(下) 模糊笔记 APP版(flutter开发)
• 2021-2022(上) 亿空间低代码平台
• 2022-至今 英语Fly小程序

英语Fly小程序篇

• 小程序介绍
• 单词大PK
• 美句跟读
• 积分兑换

等工作后虽然偶尔也看一下一些前端的博客，但由于时间原因，已经很少亲手写代码了，生活中也少了很多乐趣。就在最近突然对小程序开始疯狂，那颗不死之心又一次按捺不住了，最近做了一个小游戏来练一练手，我先来介绍一下小程序英语Fly

英语Fly小程序介绍

英语Fly是一款综合性小程序，有单词大PK的小游戏情节，支持好友对战、随机对战、词汇闯关、生词本等功能，有美句跟读的功能，我们精选出了不同场景的美句：经典美剧电影的台词、名人名言、励志、口语等美句，可以跟读进行评分，还提供了积分兑换英语书籍的功能。

单词大PK

单词大PK主要使用了websocket来实现与服务端通信的

小程序端建立socket长连接

try {
          this.socket = uni.connectSocket({
		url: url,
		success:()=>{
		   console.log("正准备建立websocket中...");
		   // 返回实例
		   return this.socketTask
		  },
		});		  
          this.initEventHandle()
     } catch (e) {
          this.reconnect(url)
     }
1
2
3
4
5
6
7
8
9
10
11
12
13

对socket长连接进行监听

initEventHandle () {
        let _this = this
        this.socket.onClose(function (event) {
          console.log('Client notified socket has closed', event)
          if (!_this.finish) {
            _this.reconnect(_this.wsUrl)
          }
        })
        this.socket.onError(function (event) {
          console.log('Client has a error', event)
          if (!_this.finish) {
            _this.reconnect(_this.wsUrl)
          }
        })
        this.socket.onOpen(function () {
          // 心跳检测重置
		  console.log("bookId: " + _this.bookId)
          _this.heartCheck.reset().start()
		  _this.param.roomId = _this.query.roomId;
		  _this.param.token = _this.query.token;
		  _this.param.bookId = _this.bookId;
          console.log('socket open', JSON.stringify(_this.param))
          _this.socket.send({
			  data: JSON.stringify(_this.param),
			  async success() {
			  	console.log("消息发送成功");
			  },
			})
        })
        this.socket.onMessage(function (event) {
          // 如果获取到消息，心跳检测重置
          // 拿到任何消息都说明当前连接是正常的
          console.log('接受到消息: ' + event.data)
          _this.messageHandler(JSON.parse(event.data))
        })
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

服务端多线程处理

// 保存当前连接
ONLINE_USER_SESSIONS.put(sessionID, session);

List<Integer> uids = STUDENT_USER_SESSIONS.putIfAbsent(roomId, new ArrayList<>());
if(uids == null){
    log.info("当前线程、房间号、uid： {} {} {}", Thread.currentThread().getName(), roomId, Integer.parseInt(JwtUtil.getUserName(token)));
    messageService.send(MQConstant.HELLO_QUEUE_NAME,roomId+"",30000);
    List<Integer> uids1 = STUDENT_USER_SESSIONS.get(roomId);
    uids1.add(uid));
    log.info("uids的数量： {}", uids1.size());
}else{
    log.info("uids的数量： {}", uids.size());
    log.info("当前线程、房间号、uid： {} {} {}", Thread.currentThread().getName(), roomId, Integer.parseInt(JwtUtil.getUserName(token)));
    synchronized (this) {
        if (uids.size() >= 2) {
            log.error("该房间已满员了....");
            PkVo pk = new PkVo();
            pk.setCode(5);
            Map<String, Object> map = new HashMap<>();
            map.put("userStudentPkDetail", pk);
            sendMessage(session, JSONObject.toJSONString(map));
            onClose(session);
            return;
        } else {
            uids.add(Integer.parseInt(JwtUtil.getUserName(token)));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

美句跟读

美句跟读中考纲单词已经拆出来了，可以试试去查看考纲单词的意思，点击喇叭可以跟读，由于篇幅有限，代码就不在这里展示了

积分兑换