福州 福马路 网站建设,潍坊网站建设,企业网页开发,大连筑成建设集团有限公司网站这篇文章无废话#xff0c;只教你如果接到即时通讯功能需求#xff0c;十分钟利用环信WebIM-vue3-Demo#xff0c;打包上线一个即时通讯项目【包含音视频通话功能】。 写这篇文章是因为#xff0c;结合自身情况#xff0c;以及所遇到的有同样情况的开发者在接到即时通讯只教你如果接到即时通讯功能需求十分钟利用环信WebIM-vue3-Demo打包上线一个即时通讯项目【包含音视频通话功能】。 写这篇文章是因为结合自身情况以及所遇到的有同样情况的开发者在接到即时通讯IM需求时需要花费大量时间去熟悉相关SDK厂商提供的API接口并且需要结合自己的项目需求在紧张张的项目工期压力之下去进行适应性调整非常的痛苦“本着轮子我来造代码大家粘”的理念。 在去年的五月份我使用vue3element plus集成环信了web端4.xSDK以产品化的目标利用业余时间陆陆续续独立完成了一个完整的开源Demo同时也在十月份以组件的形式将音视频功能也加入了进去已经经过了测试人员测试目前此项目已经合并进入了环信官方开源vue-demo分支我会在之后持续提PR增加新功能修复老的Bug同时也欢迎大家提PR完善此开源Demo。场景适用
提及场景适用是因为个人认为有几个场景在小改动的情况下能够快速使用其余个性化较强的需求如果使用这个demo确实需要花费点时间做些改动。 · 通用社交聊天类似微信 · 客服坐席沟通 · 后台内部沟通效果预览 l 登录页 l 会话聊天页 l 联系人页 直奔主题
代码下载地址 https://github.com/easemob/webim-vue-demo/tree/demo-vue3 1. 下载完Demo代码按照README.md指引先把项目启动起来具体要求的node版本以及目录结构一些注意事项一定要耐下性子去看README.md能运行起来才有接下来的事情。 2. 和前端集成一些其他三方插件一样我们首先要在平台进行注册以及去创建一个唯一的appid,只不过这个概念在环信IM的名词为appKey同样我们先去平台进行注册这是教你注册的文档入口http://docs-im-beta.easemob.com/product/enable_and_configure_IM.html 3. 打开下载好的项目代码在 src / IM / initwebsdk.js 下去将自己注册并创建的appKey替换为自己的Demo里的是默认的有限制自己的项目必须改为自己的。 4. 创建一个测试ID为后续验证使用自己创建的appKey进行登录做准备创建方式为在环信后台管理里面进行创建。 5. 将Demo手机号验证码改为刚才注册的测试ID以及密码登陆。代码所在路径为 src/views/Login/components/LoginInput LoginInput组件下在loginValue中增加两个变量名这里我加了username以及password并在loginIM方法中将SDK登录方式解开注释注释原有手机号将验证码的登录方式修改template中输入框的双向绑定值将其指向为usernamepassword。 保存并重新运行项目输入刚才注册的ID以及密码点击登录观察是否正常跳转如果正常跳转则说明已经替换完成。 至此已经完成了项目配置的完全替换即可基于此项目进行已有结构进行二次开发。 文中所提及地址导航 · Demo示例预览地址预览地址https://webim-vue3.easemob.com/login · 开源代码下载地址 代码下载 GitHub - easemob/webim-vue-demo at demo-vue3 · 环信开发文档地址API文档 产品概述 | 环信 IM 文档
