环信IM的集成

环信IM的集成

听风知秋雨 363 2020-06-10

环信IM

一、准备工作

1.创建IM应用

环信官网

  • 注册账户,选择个人开发者(可以免费使用100个用户)

  • 创建IM应用,注册模式选择开放注册

  • 进入创建的IM应用,可以看到appkeyorgnameclient idclient 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

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

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

  • 1v1v1c1c发送消息

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

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

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

  • 以我自己的HTML文件chatroom为例,先从demo文件中复制metascript标签的信息到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; //用户id
    var 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 = {
            //用户id
            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);
    };

    /*登录*/
    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.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 toUserId = 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: 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方法用来获取passwordickname

  • 通过我的chatroom文件中可以看到,通过userId就可以获取passwordnickname (注册和登录是同样的逻辑)

  • 注册两个账户,userId分别为12用来进行测试

  • 将用户1和用户2分别登录后进行单聊测试

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

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

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


 即时通讯  环信IM