环信即时通讯 聊天室、发红包

1、申请环信账号   环信通讯云

2、此文章只讲 聊天室内容

3、创建连接

let conn = {};
WebIM.config = config;
conn = WebIM.conn = new WebIM.connection({
    appKey: WebIM.config.appkey,
    isHttpDNS: WebIM.config.isHttpDNS,
    isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
    https: WebIM.config.https,
    url: WebIM.config.socketServer,
    apiUrl: WebIM.config.restServer,
    isAutoLogin: WebIM.config.isAutoLogin,
    autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
    autoReconnectInterval: WebIM.config.autoReconnectInterval,
    delivery: WebIM.config.delivery,
    useOwnUploadFun: WebIM.config.useOwnUploadFun
})
// WebIM.config 为之前集成里介绍的WebIMConfig.js

4、添加回调函数（此数据非常重要，之后的聊天交互全在这里）

conn.listen({
    onOpened: function () {},                  //连接成功回调 
    onClosed: function () {},                  //连接关闭回调
    onTextMessage: function ( message ) {},    //收到文本消息
    onEmojiMessage: function ( message ) {},   //收到表情消息
    onPictureMessage: function ( message ) {}, //收到图片消息
    onCmdMessage: function ( message ) {},     //收到命令消息
    onAudioMessage: function ( message ) {},   //收到音频消息
    onLocationMessage: function ( message ) {},//收到位置消息
    onFileMessage: function ( message ) {},    //收到文件消息
    onCustomMessage: function ( message ) {},  //收到自定义消息
    onVideoMessage: function (message) {
        var node = document.getElementById('privateVideo');
        var option = {
            url: message.url,
            headers: {
              'Accept': 'audio/mp4'
            },
            onFileDownloadComplete: function (response) {
                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
                node.src = objectURL;
            },
            onFileDownloadError: function () {
                console.log('File down load error.')
            }
        };
        WebIM.utils.download.call(conn, option);
    },   //收到视频消息
    onPresence: function ( message ) {},       //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
    onRoster: function ( message ) {},         //处理好友申请
    onInviteMessage: function ( message ) {},  //处理群组邀请
    onOnline: function () {},                  //本机网络连接成功
    onOffline: function () {},                 //本机网络掉线
    onError: function ( message ) {},          //失败回调
    onBlacklistUpdate: function (list) {       //黑名单变动
        // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
        console.log(list);
    },
    onRecallMessage: function(message){},      //收到撤回消息回调
    onReceivedMessage: function(message){},    //收到消息送达服务器回执
    onDeliveredMessage: function(message){},   //收到消息送达客户端回执
    onReadMessage: function(message){},        //收到消息已读回执
    onCreateGroup: function(message){},        //创建群组成功回执（需调用createGroupNew）
    onMutedMessage: function(message){},       //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
    onChannelMessage: function(message){}      //收到整个会话已读的回执，在对方发送channel ack时会在这个回调里收到消息
});

5、注册 (此步骤可以通过后台注册，在前端注册初始化可能需要时间)

var options = { 
    username: 'username',
    password: 'password',
    nickname: 'nickname',
    appKey: WebIM.config.appkey,
    success: function () { },  
    error: function (err) {
        let errorData = JSON.parse(err.data);
        if (errorData.error === 'duplicate_unique_property_exists') {
            console.log('用户已存在！');
        } else if (errorData.error === 'illegal_argument') {
            if (errorData.error_description === 'USERNAME_TOO_LONG') {
                console.log('用户名超过64个字节！')
            }else{
                console.log('用户名不合法！')
            }
        } else if (errorData.error === 'unauthorized') {
            console.log('注册失败，无权限！')
        } else if (errorData.error === 'resource_limited') {
            console.log('您的App用户注册数量已达上限,请升级至企业版！')
        }
    }, 
  }; 
  conn.registerUser(options);

6、登录

var options = { 
  user: 'username',
  pwd: 'password',
  appKey: WebIM.config.appkey
};
conn.open(options);

7、进入聊天室（创建聊天室需要有管理员权限，这一步可以通过在后台进行管理）

/*创建聊天室（创建聊天室需要有管理员权限，这一步可以通过在后台进行管理）*/
let options = {
    name: 'chatRoomName', // 聊天室名称
    description: 'description', // 聊天室描述
    maxusers: 200, // 聊天室成员最大数（包括聊天室创建者），默认值200，聊天室人数最大默认5000。
    members: ['user1', 'user2'] // 聊天室成员，此属性为可选的，但是如果加了此项，数组元素至少一个
}
conn.createChatRoom(options).then((res) => {
    console.log(res)
})


//加入聊天室
let options = {
    roomId: 'roomId',   // 聊天室id
    message: 'reason'   // 原因（可选参数）
}
conn.joinChatRoom(options).then((res) => {
    console.log(res)
})

8、发送消息（接收内容查看第四步）

let options = {
    roomId: 'roomId',                 // 聊天室id   
    announcement: 'hello everyone'    // 公告内容                        
};
conn.updateChatRoomAnnouncement(options).then((res) => {
    console.log(res)
})

9、聊天室事件监听

conn.listen({
  onPresence: function(msg){
    switch(msg.type){
    case 'rmChatRoomMute':
      // 解除聊天室一键禁言
      break;
    case 'muteChatRoom':
      // 聊天室一键禁言
      break;
    case 'rmUserFromChatRoomWhiteList':
      // 删除聊天室白名单成员
      break;
    case 'addUserToChatRoomWhiteList':
      // 增加聊天室白名单成员
      break;
    case 'deleteFile':
      // 删除聊天室文件
      break;
    case 'uploadFile':
      // 上传聊天室文件
      break;
    case 'deleteAnnouncement':
      // 删除聊天室公告
      break;
    case 'updateAnnouncement':
      // 更新聊天室公告
      break;
    case 'removeMute':
      // 解除禁言
      break;
    case 'addMute':
      // 禁言
      break;
    case 'removeAdmin':
      // 移除管理员
      break;
    case 'addAdmin':
      // 添加管理员
      break;
    case 'changeOwner':
      // 转让聊天室
      break;
    case 'leaveChatRoom':
      // 退出聊天室
      break;
    case 'memberJoinChatRoomSuccess':
      // 加入聊天室
      break;
    case 'leave':
      // 退出群
      break;
    case 'join':
      // 加入群
      break;
    default:
      break;
  }}
})

10、总结

以上步骤可以满足大部分需求如果需要其他聊天室的内容可以去看官网文档 聊天室 开发文档

也可以参考这个  环信git

注释：建议用web做即时通讯的，在开始的时候先封装一下 要不然之后做的时候可能越做越乱，刚开始我就踩过这个坑