如何实现简单的Web聊天功能(Web聊天功能开发)

实时系统和信息平台已成为我们日常生活中必不可少的工具，可实现即时用户交流。从文本消息和电子邮件到微信或 WhatsApp 中的群组聊天，我们都有自己喜欢的平台来与朋友和同事保持持续沟通。这些聊天应用程序无处不在，由于其即时响应时间和广泛的功能，几乎集成到了每一个现代实时应用程序中。

对聊天应用程序的依赖与日俱增的原因在于它们的众多优势。例如，它们可以加快决策速度、改善协作和提高生产率。此外，聊天平台还能记录所有对话，从而更轻松地跟踪进度和参考以前的讨论。此外，这些应用程序正变得越来越复杂，加入了视频和语音通话、屏幕和文件共享等功能，使其用途更加广泛。总之，聊天应用程序已成为现代沟通和协作不可或缺的工具。

为什么要创建Web聊天应用程序

人们对满足特定需求的新颖聊天应用程序有很高的需求。

基于Web的聊天应用程序可以根据不同行业和业务进行定制，为用户提供独特的交流和协作平台。例如，为医疗保健专业人员设计的聊天应用程序可以包含安全消息（符合 HIPAA 标准）和视频会诊等特定功能，使医疗从业人员的效率和效果更高。

创建聊天应用程序还能提供有利可图的商业机会，可能通过广告、订阅和应用内购买产生收入。此外，随着技术的进步，聊天应用程序的可能性是无限的，有可能融入人工智能和虚拟现实等尖端功能。

Web聊天应用程序可以带来很多好处。简单地说，聊天应用程序可以让您轻松地与世界上任何地方的人收发信息进行交流。有了Web聊天应用程序，用户就可以通过自定义消息功能进行生动有趣的互动，就像面对面交流一样。这还能让用户在您的平台上进行交谈，而不是到其他地方寻找信息解决方案。无论是私聊、群聊还是大型聊天，在您的应用程序中添加个性化聊天功能都有助于确保您的用户获得难忘的体验。

使用 ZIM 创建Web聊天功能开发示例

ZIM 是即构科技提供的IM PaaS 服务，可使用 SDK 实现灵活的聊天解决方案，并可快速、经济高效地集成到您的Web应用程序中。最终，这一策略可以帮助公司节省时间和金钱，同时为客户提供高质量的聊天解决方案。

以下内容介绍如何使用 ZIM SDK 快速实现基本的消息收发功能。

方案介绍

ZIM SDK 提供了如下接入方案：

在此方案中，您需要通过您自己的业务系统实现以下业务逻辑：

搭建客户端的用户管理逻辑，并下发用户 ID 用于客户端登录。
鉴权 Token，建议由您的业务后台自行实现，保证鉴权数据安全。

前提条件

在使用 ZIM SDK 前，请确保：

已在 ZEGO 控制台创建项目，获取到了接入 ZIM SDK 服务所需的 AppID 和 ServerSecret。ZIM 服务权限不是默认开启的，使用前，请先在 ZEGO 控制台自助开通 ZIM 服务（详情请参考项目管理 – 即时通讯），若无法开通 ZIM 服务，请联系 ZEGO 技术支持开通。
已获取登录 SDK 所需的 Token，详情请参考使用 Token 鉴权。

集成 SDK

使用 npm 方式集成 SDK。

1. 执行 npm i zego-zim-web 命令安装依赖。

2.导入 SDK。

import { ZIM } from 'zego-zim-web';

实现基本收发消息

以下流程中，我们以客户端 A 和 B 的消息交互为例，实现 1v1 通信功能：

实现流程：

1. 导入 SDK 文件

请参考前面导入 SDK，选择 “方式一：使用 npm 获取 SDK”，导入 SDK 文件。

2. 创建 ZIM 实例

首先我们需要在项目中创建 ZIM 实例，一个实例对应的是一个用户，表示一个用户以客户端的身份登录系统。

例如，客户端 A、B 分别调用 create 接口，传入在前提条件中获取到的 AppID，创建了 A、B 的实例：

var appID = xxxx;
// 静态同步方法，创建 zim 实例，传入 AppID。
// create 方法仅第一次调用时会创建 ZIM 实例，后续调用会返回 null。
ZIM.create({ appID });
// 通过 getInstance 获取单实例，避免热更新导致 create 多次创建返回 null。
var zim = ZIM.getInstance();

3. 监听回调事件

在客户端登录前，开发者可以通过调用 on 接口，自定义 ZIM 中的事件回调，接收到 SDK 异常、消息通知回调等的通知。

// 注册监听“运行时错误信息”的回调  
zim.on('error', function (zim, errorInfo) {
    console.log('error', errorInfo.code, errorInfo.message);
});

// 注册监听“网络连接状态变更”的回调
zim.on('connectionStateChanged', function (zim, { state, event, extendedData }) {
    console.log('connectionStateChanged', state, event, extendedData);
    // 当长时间网络连接断开导致SDK内部登出时，需要重新登录
    if (state == 0 && event != 0 && event != 4) {
        zim.login(userInfo, token)
    }
});

// 注册监听“收到单聊消息”的回调
zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);
});

// 注册监听“令牌即将过期”的回调
zim.on('tokenWillExpire', function (zim, { second }) {
    console.log('tokenWillExpire', second);
    // 可以在这里调用 renewToken 接口来更新 token
    // 新 token 生成可以参考上文
    zim.renewToken(token)
        .then(function({ token }){
            // 更新成功
        })
        .catch(function(err){
            // 更新失败
        })
});

4. 登录 ZIM

申请 Token

创建实例后，客户端 A 和 B 需要登录 ZIM，只有登录成功后才可以开始发送、接收消息、更新 Token 等。

客户端需要使用各自的用户信息和 Token 进行登录。调用 login 接口进行登录，传入用户信息 ZIMUserInfo 对象，以及获取到的 Token 进行鉴权，鉴权通过后才能登录成功。

// 登录时，需要开发者 按照 "使用 Token 鉴权" 文档生成 token 即可
// userID 最大 32 字节的字符串。仅支持数字，英文字符 和 '!', '#', '$', '%', '&', '(', ')', '+', '-', ':', ';', '<', '=', '.', '>', '?', '@', '[', ']', '^', '_', '{', '}', '|', '~'。
// userName 最大 256 字节的字符串，无特殊字符限制。
var userInfo = { userID: 'xxxx', userName: 'xxxx' };
var token = '';

zim.login(userInfo, token)
    .then(function () {
        // 登录成功
    })
    .catch(function (err) {
        // 登录失败
    });

5. 发送消息

客户端 A 登录成功后，可以向客户端 B 发送消息。

目前 ZIM 支持的消息类型：文本消息、开发者可自定义数据类型的信令消息、房间内弹幕文本消息、图片消息、文件消息、语音消息、视频消息和自定义消息。

以下为发送单聊文本消息为例：客户端 A 可以调用 sendMessage 接口，传入客户端 B 的 userID、消息内容、消息类型 conversationType 等参数，即可发送一条文本消息到 B 的客户端。

ZIMMessageSentResult 回调，判断消息是否发送成功。
onMessageAttached 回调，在消息发送前，可以获得一个临时的 ZIMMessage，以便您添加一些业务处理逻辑。例如：在发送消息前，获取到该条消息的 ID 信息。开发者在发送“视频”等内容较大的消息时，可以在消息上传完成前，缓存该消息对象，直到收到 SDK 发送成功通知时，通过比较对象相同来实现发送前 Loading 的效果。

// 发送单聊 `Text` 信息

var toConversationID = ''; // 对方 userID
var conversationType = 0; // 会话类型，取值为 单聊:0, 房间:1, 群组:2
var config = { 
    priority: 1, // 设置消息优先级，取值为 低：1（默认），中：2，高：3
};

var messageTextObj = { type: 1, message: '文本消息内容', extendedData: '消息的扩展信息（可选）' };
var notification = {
    onMessageAttached: function(message) {
        // todo: Loading
    }
}

zim.sendMessage(messageTextObj, toConversationID, conversationType, config, notification)
    .then(function ({ message }) {
        // 发送成功
    })
    .catch(function (err) {
        // 发送失败
    });

6. 接收消息

客户端 B 登录 ZIM 后，将会收到在 on 回调中设置的 receivePeerMessage 监听接口，收到客户端 A 发送过来的消息。

// 注册监听“收到单聊消息”的回调
zim.on('receivePeerMessage', function (zim, { messageList, fromConversationID }) {
    console.log('receivePeerMessage', messageList, fromConversationID);
});

7. 退出登录

如果客户端需要退出登录，直接调用 logout 接口即可。