融云发送图片消息_融云 Web SDK 如何实现表情的收发 ?

融云 Web SDK 如何实现表情的收发 ?

公司需求: 要求聊天产品像 QQ、微信一样, 可以接收、发送简单表情

首先查看融云开发文档, 可以看到表情插件的描述, 但与产品需求不完全一致, 还需要结合其他方法实现更丰富的表情功能

主要与产品不符的地方:

1、融云提供的表情个数有限, 仅 128 个

2、融云提供的表情没有 QQ 表情生动丰富

接下来依次按顺序介绍:

1、什么是 Emoji

2、如何实现类 QQ 的表情选择框

3、结合融云 SDK 实现表情的发送

4、结合融云 SDK 实现表情的接收

什么是 Emoji ?

Emoji 日语 绘文字. 是日本在无线通信中所使用的视觉情感符号, 绘指图画, 文字指的则是字符, 用于在消息中插入表情. 自 2007 年苹果公司发布的 iOS 5 输入法加入 Emoji 后, 这种表情符号开始席卷全球

最初 Emoji 实现仅为将字符转为图片显示. 比如: :) 在消息中被替换为 😀. 所以难以标准化

2010 年, Unicode 编码加入 Emoji 字符, 使其标准化. 也就是目前 Emoji 与文字一样, 本身就是字符, 系统或浏览器会自动将其转化为图形展示

如何实现类 QQ 的表情选择框

由上图, 选择框的实现本质是将表情列表依次排列渲染. 重点在于 如何获取表情列表

获取方式有以下几种:

1、直接使用融云提供的 128 个表情

var list = RongIMLib.RongIMEmoji.list;

/*

list => [

{

unicode: 'u1F6