当前位置: 首页 > Web前端 > HTML5

happyChat开发系列:使用websocket.io实现happychat双向通信前端开发

时间:2023-04-05 23:17:33 HTML5

1.前言HappyChat是我自己使用websocket写的一个完整的应用。虽然功能比较欠缺,但是实现了基本的文字聊天和群聊、私聊、机器人聊天等功能。为此,我做了一个PC端,一个无线端(手机端),用cordova打包成androidapk。已经实现了一个大型的前端项目,虽然在android端还存在一些问题,正在修改bug。二、websocket原理介绍1、为什么需要websocket?因为HTTP协议有一个缺陷:通信只能由客户端发起。比如我们想知道今天的天气,只需要客户端向服务端发送请求,服务端返回查询结果即可。HTTP协议不能让服务器主动向客户端推送信息。这种单向请求的特点,注定了客户端要知道服务端是否有持续的状态变化是很麻烦的。我们只能用“轮询”:每隔一段时间,发送一个查询,看看服务器是否有新的信息。最典型的场景就是聊天室。轮询效率低下并且浪费资源(因为您必须保持连接,或者HTTP连接始终打开)。2、websocket特性介绍:服务端可以主动向客户端推送信息,客户端也可以主动向服务端发送信息。是真正的双向平等对话,属于服务器推送技术的一种。其他特点包括:(1)基于TCP协议,服务器端实现相对容易。(2)与HTTP协议有很好的兼容性。默认的端口也是80和443,而且握手阶段使用的是HTTP协议,所以在握手的时候不容易屏蔽,可以通过各种HTTP代理服务器。(3)数据格式比较轻,性能开销小,通信效率高。(4)可以发送文本或二进制数据。(5)没有同源限制,客户端可以和任何服务器通信。(6)协议标识符为ws(如果加密则为wss),服务器URL为URL。三、使用websocket.io1、前端在vue项目中,在index.html2.后端使用koa作为后端constapp=newKoa();constserver=require("http").createServer(app.callback());constio=require("socket.io")(server);io.on("connection",socket=>{constsocketId=socket.id;/*login*/socket.on("login",asyncuserId=>{awaitsocketModel.saveUserSocketId(userId,socketId);});//更新socketIdsocket.on("update",asyncuserId=>{awaitsocketModel.saveUserSocketId(userId,socketId);});//私人聊天socket.on("sendPrivateMsg",asyncdata=>{constarr=awaitsocketModel.getUserSocketId(data.to_user);constRowDataPacket=arr[0];constsocketid=JSON.parse(JSON.stringify(RowDataPacket)).socketid;io.to(socketid).emit("getPrivateMsg",数据);});//群聊socket.on("sendGroupMsg",asyncdata=>{io.sockets.emit("getGroupMsg",data);});//添加好友请求socket.on("sendRequest",asyncdata=>{console.log("sendRequest",data);constarr=awaitsocketModel.getUserSocketId(data.to_user);constRowDataPacket=arr[0];constsocketid=JSON.parse(JSON.stringify(RowDataPacket)).socketid;console.log('socketid给谁',socketid)io.to(socketid).emit("getresponse",data);});socket.on("断开连接",data=>{console.log("断开连接",data);});});四、简介及功能乐聊是一款快乐聊天应用,支持PC端、无线端和安卓APP(1)PC和无线在线地址:http://chat.chengxinsong.cn(2)AndroidAPP下载地址:还有一些小问题待解决,地址版本v1.0.0-稍后发布。1.支持注册用户邮箱激活用户;-2.支持登录-3.支持机器人聊天;-4.支持添加好友,一对一聊天;-5.支持创建群,加群,一对一多人聊天;-6.支持删除好友、退出群-7.支持个人信息编辑-8.支持添加好友备注-9.支持聊天中文文本发送-10.支持浏览器:Chrome、Firefox、Safari、IE9及以上;v1.1.01版本,支持聊天2.支持聊天发送表情待续5.运行截图等。..6.前后端源码前端代码:https://github.com/saucxs/hap...后端代码:https://github.com/saucxs/hap...七.最后欢迎fork和star,有问题提issue

最新推荐
猜你喜欢