1 环信IM云
准备工作 :
1). 注册环信IM账户
2). 创建IM应用
2.架构
接口测试 :
3. 用户微服务
tensquare_user : 统一管理十次方系统中的用户信息 ;
1). pom.xml
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>com.tensquare</groupId>
<artifactId>tensquare_common</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<!-- mybatis-plus begin -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatisplus-spring-boot-starter</artifactId>
<version>${mybatisplus-spring-boot-starter.version}</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus</artifactId>
<version>${mybatisplus.version}</version>
</dependency>
2). application.yml
server:
port: 9008
spring:
application:
name: tensquare-user
datasource: # 数据库连接四大属性
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://192.168.192.164:3306/tensquare_user?characterEncoding=utf-8
username: root
password: root
# Mybatis-Plus 配置
mybatis-plus:
# mapper-locations: classpath:/mapper/*Mapper.xml
#实体扫描,多个package用逗号或者分号分隔
typeAliasesPackage: com.tensquare.article.pojo
global-config:
id-type: 1 #0:数据库ID自增 1:用户输入id
db-column-underline: false
refresh-mapper: true
configuration:
map-underscore-to-camel-case: true
cache-enabled: true #配置的缓存的全局开关
lazyLoadingEnabled: true #延时加载的开关
multipleResultSetsEnabled: true #开启延时加载,否则按需加载属性
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #打印sql语句,调试用
3). 引导类
@SpringBootApplication
public class UserApplication {
public static void main(String[] args) {
SpringApplication.run(UserApplication.class, args);
}
}
4). Dao接口
public interface UserDao extends BaseMapper<User> {
}
4 集成环信IM云
官方已经提供了接入/集成的SDK工具包及接入的DEMO ; 我们需要做的就是根据工具包中提供的工具 , 参考demo工程 , 来完成我们自己项目的接入即可 ;
5 用户注册
1). 注册 : 指当前系统中的用户 , 在使用环信IM云平台时 , 需要往环信IM云上注册用户信息 ;
2). 如何注册 : 使用环信IM提供的SDK工具 ; 参考官方demo ;
3). 代码实现 :
var userId , nickname , passowrd;
document.getElementById('reg').onclick = function () {
userId = document.getElementById("userId").value;
$.ajaxSettings.async=false;
$.get("/user/"+userId,function(data){
nickname = data.data.nickname;
password = data.data.password;
});
alert(nickname+":"+password);
var option = {
username: userId,
password: password,
nickname:nickname,
appKey: WebIM.config.appkey,
success: function () {
console.log('注册成功');
},
error: function () {
console.log('注册失败');
},
apiUrl: WebIM.config.apiURL
};
conn.signup(option);//SDK注册方法
};
4). 实际开发中: 应该在即时通讯页面打开时, 要来完成自动的注册的功能 ;
6 用户登录
1). 登录 : 注册好的用户, 登录到环信IM云中, 只有登录的用户才可以来进行及时通讯 ;
2). 代码实现:
//登录
document.getElementById('login').onclick = function () {
userId = document.getElementById("userId").value;
$.ajaxSettings.async=false;
$.get("/user/"+userId,function(data){
nickname = data.data.nickname;
password = data.data.password;
});
options = {
apiUrl: WebIM.config.apiURL,
user: userId,
pwd: password,
appKey: WebIM.config.appkey
};
conn.open(options);
console.log(options)
};
7 即时通讯
//文本消息
var conf = WebIM.config
//var WebIM = WebIM.default
WebIM.config = conf
WebIM.message = WebIM.default.message
WebIM.utils = WebIM.default.utils
WebIM.debug = WebIM.default.debug
WebIM.statusCode = WebIM.default.statusCode
var myDate = new Date().toLocaleString();
document.getElementById('send').onclick = function () {
var tname = document.getElementById("toUserId").value;
var tmsg = document.getElementById("myinfo").value;
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.default.message('txt', id); // 创建文本消息
msg.set({
msg: tmsg, // 消息内容
to: tname,
ext: {
'time': myDate
}, // 接收消息对象(用户id)
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);
};