即时通讯环信IM的集成使用

点击进入我的个人博客

第三方即时通讯服务，环信 IM云的集成使用，我这里主要以 web集成为主，如何把单聊模块集成到自己的项目进行的操作讲解，更多详细操作可以参考官网提供的开发文档

文章目录

环信IM
- 一、准备工作
- - 1.创建IM应用
  - 2.接口测试
  - 2.参照开发文档
- 二、Web IM 集成
- - 1.下载集成案例（下载的文件名为webim）
  - 2. 复制案例中的文件到项目中
  - 3.启动springboot进行测试
  - 4. 集成demo文件的功能到自己的HTML文件中
  - 5. 测试使用

环信IM

一、准备工作

1.创建IM应用

环信官网

注册账户，选择个人开发者（可以免费使用100个用户）
创建IM应用，注册模式选择开放注册
进入创建的IM应用，可以看到appkey，orgname，client id，client secret等字段，后面需要使用

2.接口测试

打开REST API Doc，这是环信服务器端集成Swagger文档，用于测试各个API接口
这里以获取token为例

2.参照开发文档

开发文档地址

我是web开发，选择的是web客户端集成：

web客户端集成文档直通车链接

二、Web IM 集成

1.下载集成案例（下载的文件名为webim）

git clone https://github.com/easemob/webim.git

2. 复制案例中的文件到项目中

\webim\sdk目录下的所有js文件到项目resources\static\js中
\webim\simpleDemo目录下的demo.html和WebIMConfig.js放入项目resources\static\中

demo.html文件是一个测试文档，依靠这个文档可以做集成

注意事项：

要修改demo.html文件引入js文件的路径，否则js路径会不对，因为这里是复制过来的

3.启动springboot进行测试

我的项目地址：http://localhost:9008/demo.html

demo.html文件中提供了两个测试账号：

测试帐号：1c1c，密码：111
测试账号：1v1v，密码：111

登录之后可以看到连接建立成功代表成功登录了，之后在新打开一个同样页面在登录另一个测试账号

登录好另一个测试账号就可以发消息进行测试了：

1v1v给1c1c发送消息
1c1c收到1v1v发送的消息

简单的单聊测试就完成了，后面就是将demo.html文件中需要用到的功能集成到自己的html文件中就OK了

4. 集成demo文件的功能到自己的HTML文件中

以我自己的HTML文件chatroom为例，先从demo文件中复制meta和script标签的信息到chatroom中
修改WebIMConfig.js文件中appkey为自己创建的IM项目中的appkey（在自己IM中注册用户等操作必须的）

从demo文件中将以下这段建立连接复制到chatroom的script标签中（建立连接必须的）

  /*建立连接*/var conn = {};console.log(WebIM, window.WebIM);WebIM.config = config;conn = WebIM.conn = new WebIM.default.connection({appKey: WebIM.config.appkey,isHttpDNS: WebIM.config.isHttpDNS,isMultiLoginSessions: WebIM.config.isMultiLoginSessions,host: WebIM.config.Host,https: WebIM.config.https,url: WebIM.config.xmppURL,apiUrl: WebIM.config.apiURL,isAutoLogin: false,heartBeatWait: WebIM.config.heartBeatWait,autoReconnectNumMax: WebIM.config.autoReconnectNumMax,autoReconnectInterval: WebIM.config.autoReconnectInterval,isStropheLog: WebIM.config.isStropheLog,delivery: WebIM.config.delivery});

从demo文件中将以下这段回调方法复制到chatroom的script标签中（监听必须的）

    /*回调方法*/conn.listen({onOpened: function (message) {          //连接成功回调var myDate = new Date().toLocaleString();console.log("%c [opened] 连接已成功建立", "color: green");console.log(myDate);// rek();// alert(myDate + "登陆成功")},onClosed: function (message) {console.log("onclose:" + message);console.log(error);},         //连接关闭回调onTextMessage: function (message) {$("#log-container").append("<div class='bg-success'><label class='text-info'> 收到用户id为："+message.from+";发的消息是：</label><div class='text-info'>"+message.data+"</div></div><br>");console.log('onTextMessage: ', message);},  //收到文本消息});

以上都是必须完成的步骤，后面的内容根据实际开放场景进行添加：

具体操作步骤查阅Web IM集成开放文档

我的chatroom.html文件（可供参考）

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="edge" /><title>聊天室</title><script src="./WebIMConfig.js"></script><script src="../js/webimSDK3.0.4.js"></script><script src="../js/EMedia_x1v1.js"></script><script src="./js/jquery-1.12.3.min.js"></script><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><style>body {margin-top: 5px;}</style>
</head>
<body>
<div class="container"><div class="row"><div class="col-md-3"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">用户注册或登录环信IM</h3></div><div class="panel-body"><input type="text" class="form-control" id="userId" placeholder="用户id"/><br><button id="reg" type="button" class="btn btn-primary">注册</button><button id="login" type="button" class="btn btn-primary">登录</button></div></div><div class="panel panel-primary" id="online"><div class="panel-heading"><h3 class="panel-title">当前在线的其他用户</h3></div><div class="panel-body"><input type="text" class="form-control" id="toUserId" placeholder="接收消息用户id"/><br></div></div><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">群发系统广播</h3></div><div class="panel-body"><input type="text" class="form-control" id="msg"/><br><button id="broadcast" type="button" class="btn btn-primary">发送</button></div></div></div><div class="col-md-9"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title" id="talktitle"></h3></div><div class="panel-body"><div class="well" id="log-container" style="height:400px;overflow-y:scroll"></div><input type="text" id="myinfo" class="form-control col-md-12"/> <br><button id="send" type="button" class="btn btn-primary">发送</button></div></div></div></div>
</div>
<script>/*建立连接*/var conn = {};console.log(WebIM, window.WebIM);WebIM.config = config;conn = WebIM.conn = new WebIM.default.connection({appKey: WebIM.config.appkey,isHttpDNS: WebIM.config.isHttpDNS,isMultiLoginSessions: WebIM.config.isMultiLoginSessions,host: WebIM.config.Host,https: WebIM.config.https,url: WebIM.config.xmppURL,apiUrl: WebIM.config.apiURL,isAutoLogin: false,heartBeatWait: WebIM.config.heartBeatWait,autoReconnectNumMax: WebIM.config.autoReconnectNumMax,autoReconnectInterval: WebIM.config.autoReconnectInterval,isStropheLog: WebIM.config.isStropheLog,delivery: WebIM.config.delivery});/*回调方法*/conn.listen({onOpened: function (message) {          //连接成功回调var myDate = new Date().toLocaleString();console.log("%c [opened] 连接已成功建立", "color: green");console.log(myDate);// rek();// alert(myDate + "登陆成功")},onClosed: function (message) {console.log("onclose:" + message);console.log(error);},         //连接关闭回调onTextMessage: function (message) {$("#log-container").append("<div class='bg-success'><label class='text-info'> 收到用户id为："+message.from+";发的消息是：</label><div class='text-info'>"+message.data+"</div></div><br>");console.log('onTextMessage: ', message);},  //收到文本消息});/*注册*/var userId; //用户idvar password; //密码var nickname; //昵称document.getElementById('reg').onclick = function () {var userId = document.getElementById("userId").value;$.ajaxSettings.async = false; //关闭ajax异步，改为同步，因为要保证先获取到信息$.get("/user/"+userId,function (data){password = data.data.password;nickname = data.data.nickname;});var option = {//用户idusername: userId,//密码password: password,//昵称nickname: nickname,appKey: WebIM.config.appkey,success: function () {console.log('注册成功');},error: function () {console.log('注册失败');},apiUrl: WebIM.config.apiURL};conn.signup(option);};/*登录*/document.getElementById('login').onclick = function () {console.log(WebIM, window.WebIM);userId = document.getElementById("userId").value;$.ajaxSettings.async = false; //关闭ajax异步，改为同步，因为要保证先获取到信息$.get("/user/"+userId,function (data){password = data.data.password;});options = {apiUrl: WebIM.config.apiURL,user: userId,pwd: password,appKey: WebIM.config.appkey};conn.open(options);console.log(options)};/** Message*///文本消息var conf = WebIM.config//var WebIM = WebIM.defaultWebIM.config = confWebIM.message = WebIM.default.messageWebIM.utils = WebIM.default.utilsWebIM.debug = WebIM.default.debugWebIM.statusCode = WebIM.default.statusCodevar myDate = new Date().toLocaleString();document.getElementById('send').onclick = function () {var toUserId = document.getElementById("toUserId").value;var tmsg = document.getElementById("myinfo").value;var id = conn.getUniqueId();                 // 生成本地消息idvar msg = new WebIM.default.message('txt', id);      // 创建文本消息msg.set({msg: tmsg,                  // 消息内容to: toUserId,                // 接收消息对象（用户id）ext: {'time': myDate},                       success: function (id, serverMsgId) {console.log('send private text Success');msgText = msg.body.msg;},fail: function (e) {console.log("Send private text error");}});msg.body.chatType = 'singleChat';conn.send(msg.body);$("#log-container").append("<div class='bg-success'><label class='text-info'>用户id为："+userId+";发的消息是：</label><div class='text-info'>"+tmsg+"</div></div><br>");console.log(msg);};
</script></body>
</html>

5. 测试使用

在mysql数据库中建立表，有userId，和password
在controller中编写findById方法用来获取password和ickname
通过我的chatroom文件中可以看到，通过userId就可以获取password和nickname （注册和登录是同样的逻辑）
注册两个账户，userId分别为1和2用来进行测试
将用户1和用户2分别登录后进行单聊测试

用户1给用户2发送消息：

用户2收到了用户1发过来的消息：

OK，单聊的集成就算是完成了，如果需要集成更多的内容可以从demo.html文件中复制过来，也可以参照文档说明

即时通讯环信IM的集成使用相关推荐

七(6)环信-用户体系集成-联系人管理
课程总结 1.即时通信环信通信执行过程 2.用户体系集成用户注册时分配环信账号客户端获取环信账号,自动登录环信服务器 3.联系人业务处理好友申请查看联系人列表一. 即时通信-环信介绍 1 ...
即时通讯，1 天快速集成支持单群聊、聊天室、系统通知等通信能力，安全可靠、全球互通
即时通讯,1 天快速集成支持单群聊.聊天室.系统通知等通信能力,安全可靠. 全球互通.## 标题 Android RongIM.init(this, 'AppKey', false); RongIM ...
03-即时通讯环信集成
环信环信是在XMPP的基础上进行的二次开发环信在网络上传输的数据是XML 环信是否使用过环信,简单说一下环信的实现原理环信是一个即时通讯的服务提供商环信使用的是XMPP协议,它是在XMPP的 ...
环信 php后台集成,集成环信IM功能
之前在项目中做过环信IM,一直都没时间整理这些笔记很功能 ,如今偷得浮生半日,花时间把之前的代码看了下独自乐乐,不如众乐乐,然后把这部分整理下,分享给大家. 1 首先注册环信官网注册账号环信官 ...
【2021环信IM快速集成指南】PC Web、Uni-App、小程序集成都在这里了
本文将直白且详细的描述一下如何集成环信web端的IM SDK,(小程序.Uni-app通用).这是一篇快速集成攻略,其中更多的是对于官网文档的一篇注释说明,相信很多的小伙伴在准备将环信的IM即时通讯能 ...
环信IM快速集成集成，实现客服功能（单聊）
第一:你需要登入环信官网注册一个即时云通讯帐号和一个移动客服帐号. 创建一个自己的应用,获取APPkey等信息. 环信官网:http://www.easemob.com/ 第二:下载最新环信SDK,解 ...
IM即时通讯H信 Android
一.概述 1.开发环境及安装配置开发环境Windows10下基于JRE1.8.0.OpenJDK Server VM的集成开发工具Android Studio 3.5和环信即时通讯云Android ...
环信IM客户端集成（整理）
1. 环信IM功能介绍 1. 平台架构 2. 发送消息 1. 为开发者提供基于移动互联网的即时通讯能力,如单聊.群聊.发语音.发图片.发位置.实时音频.实时视频等. ...
iOS环信3.1·集成·功能的实现
SDK集成 1.准备工作: ·此处假设你已经申请过环信的开发者账号. ·此处假设你已经在Apple开发者中心配置好证书,并上传至环信. ·如果你不需要离线消息的推送功能,可以不必配置证书. ·从环信官 ...

即时通讯环信IM的集成使用

文章目录

环信IM

一、准备工作

1.创建IM应用

2.接口测试

2.参照开发文档

二、Web IM 集成

1.下载集成案例（下载的文件名为webim）

2. 复制案例中的文件到项目中

3.启动springboot进行测试

4. 集成demo文件的功能到自己的HTML文件中

5. 测试使用

即时通讯环信IM的集成使用相关推荐

最新文章

热门文章

即时通讯环信IM的集成使用

文章目录

环信IM

一、准备工作

1.创建IM应用

2.接口测试

2.参照开发文档

二、Web IM 集成

1.下载集成案例 （下载的文件名为webim）

2. 复制案例中的文件到项目中

3.启动springboot进行测试

4. 集成demo文件的功能到自己的HTML文件中

5. 测试使用

即时通讯环信IM的集成使用相关推荐

最新文章

热门文章

1.下载集成案例（下载的文件名为webim）