Uniapp+Fastadmin实现实时通讯（改造版）

已于 2022-12-27 11:15:52 修改
阅读量685 收藏
点赞数
分类专栏： fastadmin workman 文章标签： uni-app
于 2022-12-27 10:33:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42273669/article/details/128452497
版权

一、项目介绍

后端技术：thinkphp5+fastadmin+gatewayworker
前端技术：uniapp+websocket
第一阶段实现了简单的登录、注册功能，会员可进行后台管理，工具栏主要分为三部分，消息列表、联系人，我的。
功能列表：

  1. 实时接收与发送消息
  2. 聊天消息的存储
  3. 拉取消息历史记录
  4. gatewayworker如何与thinkphp结合
  5. 如何绑定gatewayWorker与用户
  6. 未读消息的显示与处理

二、界面演示

1、登录和注册页

在这里插入图片描述
在这里插入图片描述

2、会话页面

在这里插入图片描述

3、聊天页

目前支持文字、表情、定位的发送，实时接收消息。
在这里插入图片描述
在这里插入图片描述

4、联系人页面

在这里插入图片描述

4、个人资料

在这里插入图片描述
在这里插入图片描述

三、部分代码截图

在这里插入图片描述
在这里插入图片描述
之后还有继续完善新的功能，该项目适合二开，有需要的朋友微信联系~
在这里插入图片描述

无非自然
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp+fastadmin开发的救助平台源码可二开
09-09
高仿水滴,全开源uniapp+fastadmin开发 这套是uniapp 开发源码,非常人性化,可以随意二开
高仿水滴筹源码,全开源uniapp+fastadmin开发.zip
01-15
高仿水滴筹源码,全开源uniapp+fastadmin开发 企业级别的项目源码,这套是uniapp 开发源码,非常人性化,可以随意二开
fastadmin云快充充电桩系统部署文档uniapp
最新发布
itholiday2014的博客
02-29 969
多商户 嘎嘎快充V1.0部署文档 一、服务器环境： 服务器配置4核心8GB内存5M带宽以上配置 VX next1402 只支持linux环境 nginx1.22 php7.2 开启redis、fileinfo扩展，关闭禁用workerman gatewayworkerman需要的函数，如pcntl相关的函数 mysql5.7 supervisor redis 注意： 1.站点必须配置https、websocket配置wss 2.注意开放直连服务端口:2024,并添加到安全组 二、必
fastadmin+uniapp在线聊天功能
初心
02-01 915
效果图预览 微信端效果 后台效果 html文件 {foreach name="message" item="vo"} {if condition="$vo.type== 'customer'"} {$vo.content} {/if}
高仿水滴筹源码,全开源uniapp+fastadmin开发
04-30
高仿水滴筹源码,全开源uniapp+fastadmin开发 企业级别的项目源码,这套是uniapp 开发源码,非常人性化,可以随意二开 不懂的小白不要下载
基于uniapp的高仿ONE一个
08-10
基于uni-app 的高仿「ONE·一个」
uniapp对接fastadmin的图片上传
qq_36458559的博客
07-20 342
url: imgUrl + '/api/Common/upload', //仅为示例，非真实的接口地址。'category': 'category2'//分类。filePath: filePath,//图片地址地址。"图片上传返回地址res :>> ",title: "上传失败",
fastadmin + uniapp插件短视频仿抖音插件（h5/小程序/微信授权/APP），适配多端
dsgdongshiguang的博客
11-23 1291
基于fastadmin框架开发了个短视频插件，前端基于uniapp，后台基于fastadmin框架，适配多端，使用起来相对很丝滑，相对于一般市面上的video滑动播放的那种，丝滑的不是一点点。
fastadmin后台全局ajax请求实时推送消息和新消息提醒
简单记录生活
04-14 1808
fastadmin后台全局ajax请求实时推送消息和新消息提醒
TP5整合 WorkerMan 以及 GatewayWorker
weixin_41647577的博客
09-07 1263
TP5整合 WorkerMan 以及 GatewayWorker     https://blog.csdn.net/qq_14913213/article/details/77184074
高仿水滴筹源码，全开源UniApp+FastAdmin开发，快速实现众筹平台
09-02
php源码 高仿水滴筹源码,全开源uniapp+fastadmin开发 朋友是做正规开发的,所以分享过来的都是企业级别的项目源码,这套是uniapp 开发源码,非常人性化,可以随意二开
uniapp+fastadmin开发的众筹管理系统
06-23
企业级别的项目源码,这套是uniapp 开发源码,非常人性化,可以随意二开
开源IM即时通讯源码-社交＋电商＋音视频＋直播-pc+web+ios+安卓-uniapp+php+mysql
weixin_46188821的博客
05-14 2087
uniapp+php现成即时通讯源码，代码规范，适合企业或个人经过简单的二次开发、UI设计即可快速上线，适合行业广，如:电商、社交、在线医疗、互联网医院、在线教育、二手车、闲置平台、短视频、直播平台、招聘平台、本地生活等…会员管理、聊天管理、动态管理、商品管理、订单管理、提现管理、认证管理、直播管理、升级管理、图片管理、色情图片视频识别。交换微信、上线提醒、语音转文字、消息撤回、图片、视频文件、emoji表情、图片表情、商品推荐、发红包、常用语。下单、支付、评价、退款流程、收货流程、物流查询。
依赖安装-shopro
沈明沅
04-25 269
请确保fastadmin已经完整安装，如果不是完整包请注意是否执行安装过fastadmin的依赖，详细请查看安装 php 扩展请在这里删除禁用函数。
fastadmin 实现留言对话
奥特曼想做个好人的博客
09-12 1016
fastadmin 实现对话留言
Shopro商城 高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
u011092458的博客
11-24 4078
基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城，拥有强大的店铺装修、小程序直播、自定义模板、路由同步、多端支付（微信，支付宝）、多规格商品、运费模板、多地区邮费、库存管理、全端分享等功能。主要功能：登录、注册、签到、富文本、分类、购物车、筛选、地址、商品评论、积分商城、拼团、秒杀、多规格、全端分享、路由拦截、分享海报、多支付方式、订单管理、用户信息等等。◆限时秒杀、预售、优惠券、vip会员…栏目可在后台自定义。
[Uniapp]前后端交互详解：如何从后端数据库调用数据
wahzx的博客
11-14 3543
以上就是在uniapp中实现前后端交互的基本步骤。通过这种方式，你的uniapp前端应用可以从后端数据库获取所需数据。记得在开发过程中关注数据安全和API的权限控制，以保护你的数据不被未经授权的访问。
php fastadmin web消息推送系统
weixin_39347356的博客
08-30 683
官方说明文档 简单集成到fastadmin后台，未做数据处理 下载压缩包放到系统任意位置，运行即可 html路径： \application\admin\view\common\header.html 26行 <!--新订单提醒--> <li class="hidden-xs orders" data-uid="{$Think.session.admin.id}"> <a href="#" ><i class="fa" style="font-siz
websocket实时推送数据 uniapp+vue实现聊天功能
05-28
要实现实时聊天功能，可以使用WebSocket技术。WebSocket是一种在单个TCP连接上进行全双工通信的协议。在客户端和服务器之间建立WebSocket连接后，双方可以通过该连接进行实时通信。 在uniapp+vue中实现WebSocket通信，可以使用uni-app提供的uni-ws组件。uni-ws是用于在uni-app中进行WebSocket通信的组件。使用uni-ws组件，可以轻松地在uni-app中实现实时聊天功能。 以下是实现WebSocket实时聊天功能的步骤： 1. 在vue组件中引入uni-ws组件，并在data中定义WebSocket连接对象： ``` import uniWS from '@/components/uni-ws/uni-ws.vue' export default { components: { uniWS }, data() { return { ws: null } }, } ``` 2. 在模板中使用uni-ws组件，并绑定事件处理函数： ``` <uni-ws url="ws://localhost:8080/ws" @open="onOpen" @message="onMessage" @close="onClose" @error="onError"></uni-ws> ``` 3. 在事件处理函数中处理WebSocket连接的各种事件： ``` methods: { onOpen() { console.log('WebSocket连接已打开') }, onMessage(event) { console.log('接收到消息：', event.data) }, onClose() { console.log('WebSocket连接已关闭') }, onError(event) { console.error('WebSocket连接发生错误', event) } } ``` 4. 使用WebSocket连接对象发送和接收消息： ``` methods: { sendMessage() { if (this.ws && this.ws.readyState === WebSocket.OPEN) { this.ws.send('Hello, WebSocket!') } } } ``` 在以上代码中，sendMessage()方法用于向WebSocket服务器发送消息。如果WebSocket连接已打开，就可以通过WebSocket连接对象的send()方法向服务器发送消息。 通过以上步骤，就可以在uniapp+vue中使用WebSocket实现实时聊天功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值