如何基于 ZEGO SDK 实现 Web 基本消息收发

ZEGO即构开发者

已于 2022-04-09 09:17:06 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签：实时音视频实时互动 web

于 2022-04-09 02:21:08 首次发布

本文链接：https://blog.csdn.net/ZEGO123/article/details/124052856

即时通讯（Instant Messaging）是一种基于互联网的即时交流消息的业务。

实时聊天交互功能是市面上主流APP的重要功能之一，人们所熟悉的就是微信，QQ的聊天消息系统，IM看似简单，技术开发绝非易事，海量并发，超低延时，消息必达等高实时性需求需要众多技术的应用合体；

IM结合RTC可以实现直播间场景的实时互动，感兴趣的小伙伴可以查阅RTC系列专题教程，结合需求进行IM+RTC服务联动的场景开发；

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

1 方案介绍

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

在这里插入图片描述

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

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

2 项目准备

2.1 创建项目

进入即构官网，在【ZEGO控制台】创建项目，并申请有效的 AppID，这一步很关键，appid为应用的唯一标识，如身份证号，是应用的身份证明，用于明确你的项目及组织身份。zego提供的服务也是基于APP ID；

App ID的获取方式很简单，只需3～5分钟，在即构官网-我的项目-创建即可。创建的项目信息可用于SDK的集成和配置；

2.2 Token 鉴权

登录房间时必须使用 Token 鉴权，可参考 Token 鉴权教程。
为了方便开发阶段的调试，开发者可直接在 ZEGO 控制台获取临时 Token（有效期为 24 小时）来使用，详情请参考控制台（新版） - 项目管理中的 “项目信息”。

3 集成 SDK

3.1 新建项目

此步骤以如何创建新项目为例，如果是集成到已有项目，可忽略此步。
1.创建一个文件夹作为项目文件夹，结构类似如下：

├── assets
│   ├── css
│   │   └── index.css # 页面的样式
│   └── js
│       ├── biz.js    # 实现 im 业务功能
│       └── zim.js    # zim sdk
├── index.html        # 应用的前端页面文件

2.将以下代码拷贝到 “index.html” 文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>ZIM</title>
    <link rel="stylesheet" href="assets/css/index.css" />
</head>

<body></body>

<script src