IM --- Instant Messaging 即时通讯(环信IM云)

1 环信IM云

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqVpzuBf-1584154765954)(assets/image-20200313114353654.png)]

准备工作 :

1). 注册环信IM账户

2). 创建IM应用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wpk9iOlb-1584154765955)(assets/image-20200313114530541.png)]

2.架构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nUE6RFC3-1584154765956)(assets/image-20200313115713135.png)]

接口测试 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mOQWYxUT-1584154765956)(assets/image-20200313120012352.png)]

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云

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSQidPJb-1584154765957)(assets/image-20200313144010594.png)]

官方已经提供了接入/集成的SDK工具包及接入的DEMO ; 我们需要做的就是根据工具包中提供的工具 , 参考demo工程 , 来完成我们自己项目的接入即可 ;

5 用户注册

1). 注册 : 指当前系统中的用户 , 在使用环信IM云平台时 , 需要往环信IM云上注册用户信息 ;

2). 如何注册 : 使用环信IM提供的SDK工具 ; 参考官方demo ;

3). 代码实现 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qTHMmJHA-1584154765959)(assets/image-20200313151958259.png)]

 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注册方法
	  };

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qlqol41B-1584154765959)(assets/image-20200313152438555.png)]

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);
};

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9SlQOsvA-1584154765960)(assets/image-20200313154859249.png)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值