如何宣传自己的网站,传媒公司简介范文,杭州手机网站建设公司,wordpress首页不显示全文环信WebIM 超详细教程01#xff1a;点对点单聊 第一个单聊#xff08;点对点#xff09;Demo前言一#xff0c;准备工作#xff1a;注册-》登录-》创建应用-》创建应用用户二#xff0c;搭建工程#xff0c;实现简单的单聊#xff08;点对点#xff09;功能三#xf… 环信WebIM 超详细教程01点对点单聊 第一个单聊点对点Demo前言一准备工作注册-》登录-》创建应用-》创建应用用户二搭建工程实现简单的单聊点对点功能三总结人类的本质复读机 第一个单聊点对点Demo
前言
为什么会写这样一篇帖子? 起因是由于项目中用到了聊天功能所以听从前辈建议学习用第三方环信的技术来实现 而通过查看一些技术文档和环信官方的文档屡屡受挫也可能是本人技术水平所限这些文档和环信方面的官方文档写的都不是很详细只是点到即止并不能让初学者快速上手尤其是项目急的时候我也是结合了一些前辈给的建议写出了单群聊等功能回想起自己百度查找资料时候的无力感遂写了此贴。
本次只是针对点对点的单聊而实现的简单demo本次的目的只是帮初学者进行【扫盲】有些配置没有用到请自行查看官方文档本篇是以傻瓜式新手教学为出发点力求能用几小时快速入门环信的sdk以解读者燃眉之急内有大量图片请自行斟酌如有转载请站内联系本人登录功能在配置文件里默认为isAutoLogin: true所以省去了手动登录conn.setPresence();环信官网https://www.easemob.com/
一准备工作注册-》登录-》创建应用-》创建应用用户
1. 打开环信的登录注册页面:https://console.easemob.com/user/login 登录成功后进入控制台 首先点击【创建IM应用】注意 这里只演示点对点【单聊】的简单DEMO 2. 【创建IM应用】页面 appname可以理解为创建应用的ID唯一 Appkey环信为你自动生成的一串唯一标识用来区别应用 3. 应用创建好了可以在控制台查看。之后点击应用进入应用控制台 可以看到左侧控制台信息改变了右侧为当前应用的详细信息 4. 我们点击【IM用户】可以看到我们当前的应用是没有任何用户的可以简单的理解为现在有一款聊天软件也就是我们创建的当前应用‘demo2’但是还没有任何用户注册使用它也就是说现在应用里最少要创建2个用户才能实现最基本的点对点单聊功能现在我们点击【创建IM用户】来创建2个用户 我们创建两个用户zhangsan张三lisi李四这里我的密码统一设定为123456图示创建 创建好两位用户后为了之后调试信息时方便统一将消息通知选项修改为【发送详情】 图示修改页面 OK用户创建完毕 5. 至此我们的准备工作就做完了接下来我们将参考环信的官方文档来创建我们的点对点单聊demo。
二搭建工程实现简单的单聊点对点功能
1. 我们先去看看环信的官方文档是怎么说的http://docs-im.easemob.com/im/web/intro/start 如图示官方给了我们webIM的地址不墨迹直接去GitHub上下载最新的SDK包 GitHubhttps://github.com/easemob/web-im 这里下载1.4以后的版本 下载之后我们可以看到这是一个环信官方为我们创建好的完整版Demo工程包括单聊群聊聊天室等全部的功能和详细的配置不过我们现阶段用不上这些只需要把核心js文件提取出来哪些文件呢我们继续去官方文档里看看 这里官方告诉我们的很明确需要这几个js文件 /sdk/dist/strophe-1.2.8.min.js、/sdk/dist/websdk-1.4.11.js、/demo/javascript/dist/webim.config.js 这里我加了jq的js为了不出其他 “意外” 我将关联的js都加了进来但核心的还是上述3个js
2. 使用sdk搭建单聊demo构建思路 首先我们先构思一下消息应该如何传递平时用的微信QQ等聊天软件的单聊点对点场景 发送消息 张三 在不啊? 李四 发送消息 李四 在呢,有啥事啊? 张三 依据这个思路我们先简单的写出前台页面这里我用的 HBuilderX 这款编辑器写前端代码 【不考虑美观我们使用原始标签快速构建一个符合思路的页面】 如上图所示我们构建出两个页面一个是zhangsan的发送与接收另一个为lisi的
3. 实现页面 现在我们来实现我们写的页面怎么做呢还是去官方文档看 如图所示我们先去修改webim.config.js文件里的配置这里只需修改appkey为我们应用的appkey即可 接下来我们继续配置文档弄好以后根据官方文档所述我们进行IM的初始化 初始化第一步创建连接这里我们就复制代码即可 初始化第二部添加回调函数这里我们就复制代码并简单的进行精简 这里我们拿zhangsan.js实现lisi.js同理即可 在这里我们设置页面加载的时候就开始初始化
/*** zhangsan.js* 注意尽量不要使用 alter 方法这样会使连接中断 */
var conn null;
var getMsg1 ;//发送的消息
var getMsg2 ;//接收的消息
$(function() {//创建连接开启IM连接conn new WebIM.connection({isMultiLoginSessions: WebIM.config.isMultiLoginSessions,url: WebIM.config.xmppURL,heartBeatWait: WebIM.config.heartBeatWait,autoReconnectNumMax: WebIM.config.autoReconnectNumMax,autoReconnectInterval: WebIM.config.autoReconnectInterval,apiUrl: WebIM.config.apiURL,isAutoLogin: true });//回调函数开启监听精简过后的代码conn.listen({onOpened: function(message) {console.log(###Listen Success! You can used send###,message); },onClosed: function(message) {}, //连接关闭回调onTextMessage: function(message) {console.log(###收到了文本###,message);getMsg2 $(#text02).val()message.sourceMsg\n;$(#text02).val(getMsg2);}, //收到文本消息onError: function(message) {console.log(###失败回调###,message);}, //失败回调onReceivedMessage: function(message) {}, //收到消息送达服务器回执onDeliveredMessage: function(message) {}, //收到消息送达客户端回执onReadMessage: function(message) {} //收到消息已读回执});})到这里我们的初始化就算完成。接下来开始实现页面上第一步【注册–登录】 注从这里开始就不付官方文档图片自行查看复制即可我只贴出我的代码
前端登录注册
body
div styleheight: 00px;width: 100%;float: left;div aligncenter styleborder: #000000 solid 1px; width: 200px;float: left;br /input typetext idusername value placeholderusername /br /br /input typetext idpassword value placeholderpassword /br /br /input typetext idnickname value placeholdernikcname /br /br /button idregist注册/button/divdiv aligncenter styleborder: #0088CC solid 1px; width: 200px;float: left;margin-left: 20px;br /input typetext idusername1 valuezhangsan placeholderusername1 /br /br /input typetext idpassword1 value123456 placeholderpassword1 /br /br /button idlogin登录/button/div
/divdiv aligncenter styleborder: #0088CC solid 2px; width: 200px;float: left;margin-left: 500px;div aligncenter styleborder: #950B02 solid 5px;br /input typetext idsend value placeholdersendstylemargin-top: 20px; /br /br /button idsendMsg发送消息给lisi/button/divbr /h3自己说的话/h3textarea idtext01 styleheight: 300px;/textareabr /br /
/divdiv aligncenter styleborder: #950B02 solid 2px; width: 200px;float: left;margin-left: 100px;div aligncenter styleborder: #0088CC solid 5px;br /h3消息来源:lisi/h3br //divbr /h3接收的对方消息/h3textarea idtext02 styleheight: 300px;/textareabr /br /
/div
/bodyscript typetext/javascript srcsdk/jquery.min.js charsetutf-8/scriptscript typetext/javascript srcsdk/webim.config.js/scriptscript typetext/javascript srcsdk/strophe-1.2.8.min.js/scriptscript typetext/javascript srcsdk/websdk-1.4.13.js/scriptscript typetext/javascript srczhangsan.js/script对应zhangsan.js $(#regist).click(function() {console.log(###注册###);var myusername $(#username).val();var mypassword $(#password).val();var mynickname $(#nickname).val();var options {username: myusername, //环信用户名password: mypassword, //环信密码nickname: mynickname, //环信昵称appKey: WebIM.config.appkey,success: function(msg) {console.log(###注册成功###,msg);},error: function(msg) {console.log(###注册失败###,msg);},apiUrl: WebIM.config.apiURL};conn.registerUser(options);})$(#login).click(function() {console.log(###登录###);var myusername $(#username1).val();var mypassword $(#password1).val();var options {apiUrl: WebIM.config.apiURL,user: myusername,//环信用户名pwd: mypassword,//环信密码appKey: WebIM.config.appkey,success: function(msg) {console.log(###登录成功###,msg);},error: function(msg) {console.log(###登录失败###,msg);}};conn.open(options);//该设置为手动上线conn.setPresence();})进行测试我们先进入环信的应用控制台将已创建的2个用户先删除 OK此时我们应用又回到没有用户null的状态 现在就开始测试 登录失败因为我们还没有注册zhangsan这个用户到应用当中下面开始【注册】 此时我们再回到环信IM应用的控制台刷新下如下图所示张三已经注册进来了 用同样的方法我们注册李四 注册完成接下来我们在进行登录试试 登录成功我们去控制台看看如图示我们看到了已经登录成功了 此时我们可以在控制台模拟一条消息发送给用户zhangsan看看能不能接收到消息 可以看到我们已经接收到了控制台的消息from发送者为admin就是我们管理员sourceMsg为消息内容to代表我们接收方就是用户zhangsan 到这里已经完成了一个简单的接收接下来实现发送功能同样参考官方文档
//发送消息$(#sendMsg).click(function(){var txt $(#send).val();var id conn.getUniqueId(); // 生成本地消息idvar msg new WebIM.message(txt, id); // 创建文本消息msg.set({msg: txt, // 消息内容to: lisi, // 接收消息对象用户idroomType: false, success: function (id, serverMsgId) {console.log(###消息发送成功###,msg);},fail: function(e){console.log(###消息发送失败###);}});msg.body.chatType singleChat;conn.send(msg.body);getMsg1 $(#text01).val()txt\n;$(#text01).val(getMsg1);})先登录zhangsan和lisi zhangsan发送一条消息给lisi 发送成功我们去lisi的页面看看 很好lisi接收到了zhangsan 的消息现在lisi要回复一句话给zhangsan
发送成功我们再切回zhangsan的页面去看看 这时zhangsan也接收到了lisi回复的信息
OK至此我们大功告成了
三总结人类的本质复读机
本次只是针对点对点的单聊而实现的简单demo本次的目的只是帮初学者进行【扫盲】有些配置没有用到请自行查看官方文档登录功能在配置文件里默认为isAutoLogin: true所以省去了手动登录conn.setPresence();由于本人技术水平有限其中不可避免有纰漏请大家见谅亦或者错误如有大佬请帮忙改正时间富裕的话以后还会更一下聊天室的功能也许吧。。。。。。。之后跟环信官方客服和我沟通了一下得到的消息是官方文档是后台程序员写的所以有一些地方避免不了 犯了我们程序员的通病对客户使用的体验可能做得不好而客服也说了他们现在也正在着手重新整理官方文档这也是一种责任的体现吧demo工程链接https://pan.baidu.com/s/10rXFlBl1tR7e9ttR3RlP1A 提取码4aga2020/02/20 十分抱歉 由于demo工程年代久远 而且我的办公地点几经变更源文件和网盘文件已经丢失但是能看完这篇博文的相信我绝对能自己打出来
