我是一名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)
}
对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))
})
}
服务端多线程处理
// 保存当前连接
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)));
}
}
}
美句跟读
美句跟读中考纲单词已经拆出来了,可以试试去查看考纲单词的意思,点击喇叭可以跟读,由于篇幅有限,代码就不在这里展示了