环信WebIM 超详细教程01：点对点单聊
第一个单聊（点对点）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包
GitHub：https://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 style="height: 00px;width: 100%;float: left;">
<div align="center" style="border: #000000 solid 1px; width: 200px;float: left;">
<br />
<input type="text" id="username" value="" placeholder="username" /><br /><br />
<input type="text" id="password" value="" placeholder="password" /><br /><br />
<input type="text" id="nickname" value="" placeholder="nikcname" /><br /><br />
<button id="regist">注册</button>
</div>
<div align="center" style="border: #0088CC solid 1px; width: 200px;float: left;margin-left: 20px;">
<br />
<input type="text" id="username1" value="zhangsan" placeholder="username1" /><br /><br />
<input type="text" id="password1" value="123456" placeholder="password1" /><br /><br />
<button id="login">登录</button>
</div>
</div>
<div align="center" style="border: #0088CC solid 2px; width: 200px;float: left;margin-left: 500px;">
<div align="center" style="border: #950B02 solid 5px;">
<br />
<input type="text" id="send" value="" placeholder="send"style="margin-top: 20px;" /><br /><br />
<button id="sendMsg">发送消息给lisi</button>
</div>
<br />
<h3>自己说的话</h3>
<textarea id="text01" style="height: 300px;"></textarea><br /><br />
</div>
<div align="center" style="border: #950B02 solid 2px; width: 200px;float: left;margin-left: 100px;">
<div align="center" style="border: #0088CC solid 5px;">
<br />
<h3>消息来源:lisi</h3><br />
</div>
<br />
<h3>接收的对方消息</h3>
<textarea id="text02" style="height: 300px;">
</textarea><br /><br />
</div>
</body>
<script type="text/javascript" src="sdk/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="sdk/webim.config.js"></script>
<script type="text/javascript" src="sdk/strophe-1.2.8.min.js"></script>
<script type="text/javascript" src="sdk/websdk-1.4.13.js"></script>
<script type="text/javascript" src="zhangsan.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(); // 生成本地消息id
var msg = new WebIM.message('txt', id); // 创建文本消息
msg.set({
msg: txt, // 消息内容
to: 'lisi', // 接收消息对象（用户id）
roomType: 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 提取码：4aga
- 2020/02/20 十分抱歉 由于demo工程年代久远 而且我的办公地点几经变更，源文件和网盘文件已经丢失，但是能看完这篇博文的相信我，绝对能自己打出来
3243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
