合成大西瓜?不如写个可以一起聊天吃瓜放烟花的聊天室 #13
AILHC
started this conversation in
Game Development Blogs
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
打个招呼
大家好~
游戏开发之路有趣但不易,
玩起来才能一直热情洋溢。
我是喜欢游戏开发的海潮😉
前言
社交是人的基本需求。
互联网时代,基于互联网的社交带给网民们无穷的欢乐和瓜。
![吃瓜](https://camo.githubusercontent.com/72162df9ceb319a211e6ef3053e9f798f38afe428568208f635f0d6dcae6585c/68747470733a2f2f636f64696e672d70616765732d6275636b65742d3433343134372d373538383739352d343537342d3336373533352d313235353533303038302e636f732e61702d6775616e677a686f752e6d7971636c6f75642e636f6d2f696d672f6368696775612e6a7067)
那些能够实时交互的社交软件/游戏,往往会带给我们更多惊喜。
最近微信更新了8.0版本,可以在聊天的时候放炸弹,烟花等动态表情。很多人都玩得不亦乐乎~
在这之前呢,我的框架仓库增加了一个独立的网络模块,可以用于构建长连接网络游戏/应用。
特性:
传送门:enet
那接下来,我带大家借助enet库实现
一个带烟花效果的socket demo(超简单,三步就可以)
一个接近真实网络游戏开发的多人聊天室demo
玩起来~
极简聊天放烟花
第一步:引入网络库并初始化
enet这个库,发布于npm公共仓库中。提供多种规范,适用于任何平台。
这次我们直接通过url引入iife格式的js
第二步: 写上收发消息的逻辑
就几句代码,so easy~
这个时候,我们就可以运行看看效果了
等待服务器连接成功(因为那个公用的测试服务器有时慢有时快)
在控制台输入 sendMsgToServer("hello enet")
第三步:加上烟花效果
烟花效果网上扒来的
快过年了,用JS让你的网页放烟花吧
在原来的代码里改
运行起来,看看效果
简单的仿微信聊天放烟花就这样了
在线demo
源码
接下来,我们搞个大的。
多人聊天放烟花
在实际的网络应用开发中,网络通信的需求会复杂许多。
enet模块对上述情况都进行了封装,只需要根据提供的接口进行实现就可(无需改源码)
在这个多人聊天室demo中,我将使用protobuf作为通信协议。
为什么使用protobuf?
什么是protobuf
优势
可以快速玩起来,统一的协议语言可以和多种后端语言快乐地玩起来,甚至多人sport🤪👩🏿🤝🧑🏿👬👨🏾🤝👨🏼
不用自己设计协议和实现协议编解码
👀来看看如何接入protobuf
使用protobuf
虽然不用自己设计协议,但怎么接入开发中还是需要滴
常见的protobuf使用方式
我这里选择第二种方案
为了方便协议的导出,我用自己开发的一个protobuf工具:egf-protobuf
安装工具到全局或者项目目录
在package.json写一下npm script
初始化项目 npm run pbInit
创建proto文件目录protofiles
写协议 pb_base.proto
修改一下导出配置protobuf/epbconfig.js
ps:由于后端用ts,所以也配置了后端文件导出路径(前后端同时导出=双倍的快乐🤞🏻✌🏻)
导出js和.d.ts
项目中引入protobufjs库和proto_bundle.js
这样就可以在业务里愉快地使用protobuf来进行协议的编码解码了
将enet和protobuf结合起来
enet中如果需要自定义协议处理则需要实现enet.IProtoHandler接口
举个栗子🌰
我需要使用protobuf协议进行通信
那我就实现接口写一个protobuf协议处理器。
比如:egf-pbws
简单两步用起来(☞゚ヮ゚)☞
安装egf-pbws
和enet结合
准备工作做好了,开始写客户端
CocosCreator2.4.2实现多人聊天客户端
这个客户端项目中写了3个例子
由于篇幅有限,UI组件的实现就不讲了,都是很简单的实现,具体可以直接看源码
传送门:聊天客户端实现
核心逻辑实现
烟花效果代码实现
界面效果图
node+TypeScript实现简易后端
我最熟悉node,而且可以共用enet-pbws的这个protobuf协议处理库
就几行代码
开启多人
Sport聊天启动项目
初始化项目
在/examples/egf-net-ws目录,打开终端
如果有yarn则可以
启动服务器(还是在刚刚的目录下)
服务器启动成功:
服务器启动:监听端口:8181
启动客户端:用CocosCreator2.4.2打开项目
最终效果
一起聊天放烟花
总结
第一个demo,借助enet通过简单的几句代码就可以实现socket收发消息
第二个demo,借助enet以及egf-protobuf和enet-pbws可轻松实现基于protobuf协议的多人聊天室应用
由于篇幅有限,有些功能没有讲到
后续将分享一下,如何设计enet
最后
我是喜欢游戏开发的海潮😉
持续学习,持续up,分享游戏开发心得,玩转游戏开发
游戏开发之路有趣但不易,
玩起来才能一直热情洋溢。
欢迎关注我的公众号,更多内容持续更新
公众号搜索:玩转游戏开发
或扫码:![img](https://camo.githubusercontent.com/56f4c8384c8fd7a744f31f48ab64b84ce277606484aa393a47b1d9eae05f34d1/68747470733a2f2f70332d6a75656a696e2e62797465696d672e636f6d2f746f732d636e2d692d6b3375316662706663702f61626430633134633963393534653536616632306164623731666130306461397e74706c762d6b3375316662706663702d7a6f6f6d2d312e696d616765)
QQ 群: 1103157878
博客主页: https://ailhc.github.io/
掘金: https://juejin.cn/user/3069492195769469
github: https://github.com/AILHC
Beta Was this translation helpful? Give feedback.
All reactions