环信webIM即时通讯学习笔记

最新推荐文章于 2025-07-17 10:20:02 发布

lyxyldd

最新推荐文章于 2025-07-17 10:20:02 发布

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签：即时通讯环信webim

本文链接：https://blog.youkuaiyun.com/lyxyldd/article/details/77749845

本文介绍了如何使用环信webIM进行即时通讯的详细步骤，包括注册获取appkey、引用本地文件、连接、注册、登录、监听回调、发送文字、图片和文件消息的方法，以及如何处理环信表情解析问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个小型的聊天工具，需要使用环信来实现即时通讯，可发送文字，表情，图片，以及文件

参考环信开发文档

1、注册环信即时通信云获得appkey

（1）注册账号之后，登录进入即时通信云管理后台，并在我的应用下创建一个自己的应用，这样就可得到应用的appkey了

2、引用本地文件

（1）下载web sdk并解压后，将 /sdk/dist/strophe-1.2.8.min.js、/sdk/dist/websdk-1.4.11.js、/demo/javascript/dist/webim.config.js 拷贝到系统相应的目录下。

（2）新建 html 文件并严格按照如下顺序引入相关 js 脚本。

<script type='text/javascript' src='webim.config.js'></script>
<script type='text/javascript' src='strophe-1.2.8.min.js'></script>
<script type='text/javascript' src='websdk-1.4.11.js'></script>

（3）更改webim.config.js里的appkey，改为自己的appkey

3、使用环信

3.1连接

/*头部连接*/
var conn = new WebIM.connection({
    isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
    https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
    url: WebIM.config.xmppURL,
    heartBeatWait: WebIM.config.heartBeatWait,
    autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
    autoReconnectInterval: WebIM.config.autoReconnectInterval,
    apiUrl: WebIM.config.apiURL,
    isAutoLogin: true
});

3.2注册

//注册用户
var options = {
                                username: userid,
                                password: password,
                                nickname: nickname,
                                appKey: WebIM.config.appkey,
                                success: function () {//注册成功之后回调函数
                                    
                                },
                                error: function () {},
                                apiUrl: WebIM.config.apiURL
                            };
                            conn.registerUser(options);