【分布式websocket】表情怎么做？自制表情包和Unicode表情符号区别？表情编解码？【20期】

2024-03-26 05:28
文章标签 怎么 区别 websocket 分布式 表情 20 自制 unicode 编解码 表情符号

本文主要是介绍【分布式websocket】表情怎么做？自制表情包和Unicode表情符号区别？表情编解码？【20期】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

表情包是聊天系统中一个比较常见的功能。常见的表情表分为两种是类型。
一种是Unicode表情，另外一种是图片表情。我们这篇文章两种都会涉及。
图片类表情包会涉及到编解码。不会将发送消息的图片的url地址也一并存入数据库中。
文章将会从表情分类。表情编解码。表情展示等方面来分享。还有就是分享一下表情包后台的数据结构。比如允许用户自己创建表情包之类的功能。

目前已经写的文章有。并且有对应视频版本。关注我的B站查看视频。
git项目地址 【IM即时通信系统（企聊聊）】点击可跳转

分布式websocket即时通信(IM)系统构建指南【第七期】
分布式websocket即时通信(IM)系统保证消息可靠性【第八期】
分布式websocket IM聊天系统相关问题问答【第九期】
什么？websocket也有权限！这个应该怎么做？【第十期】
分布式ID是什么，以美团Leaf为例改造融入自己项目【第十一期】
IM聊天系统为什么需要做消息幂等？如何使用Redis以及Lua脚本做消息幂等【第12期】
微信发送一条消息经历哪些过程。企业微信以及钉钉的IM架构对比【第13期】
微信群为什么上限是500人，IM设计系统中的群聊的设计难点【第14期】
【分布式websocket】RocketMQ发送消息保证消息最终一致性需要做哪些处理？【第15期】

【分布式websocket】群聊中的各种难点以及解决推拉结合【第16期】

【分布式webscoket】未读消息如何设计？解决缓存与数据库数据一致性！推送未读消息流程【第17期】

IM系统客户端消息存储在手机电脑浏览器分别存储在什么地方?对消息加密策略？如何保证服务端消息和客户端消息一致性【第18期】
【分布式websocket 】前端vuex管理客户端消息crud！使用localStorage来存储【第19期】

vant官网
https://vant-contrib.gitee.io/vant/v3/#/zh-CN/popup

设计过程

是否需要存储数据库

存储URL到数据库的情况：

  1. 表情自定义性高：如果你的IM系统允许用户上传自定义表情，那么每个表情的URL都是唯一的，需要存储到数据库中以便检索和显示。
  2. 动态表情包：如果系统支持动态添加或更新表情包，那么表情的URL可能会变化，存储URL到数据库可以方便管理和更新。
  3. 访问控制：如果某些表情需要根据用户权限显示（如VIP表情），则可能需要将表情的URL和权限信息存储到数据库中，以便进行权限验证。
    不需要存储URL到数据库的情况：
  4. 固定的表情集：如果你的系统使用的是一组固定的、预先定义好的表情，且这些表情不会频繁变更，那么可以将表情的URL硬编码在客户端或服务器的配置文件中，而不是存储在数据库里。
  5. 简化设计：为了简化数据库设计和减少数据库操作，如果表情的管理和使用相对简单，可以考虑不将URL存储在数据库中。
    实现示例
    对于不存储URL到数据库的设计，你可以在客户端或服务器上维护一个表情的映射表，将特定的标记映射到对应的URL。例如，使用一个JSON对象存储表情的标记和URL：

对于固定和简单的表情系统，不存储URL可能是一个更简洁高效的选择。

数据库字符集设置

要在Java应用程序中通过数据库连接支持存储和检索表情符号（如Unicode中的Emoji），确实需要注意数据库的字符集配置，特别是对于MySQL数据库。以下是一些关键的注意事项：

  1. 使用MySQL 5.5.3及以上版本
    从MySQL 5.5.3版本开始，引入了utf8mb4字符集，它支持存储4字节的Unicode字符。这对于存储表情符号是必需的，因为许多表情符号（包括所有新的表情符号）需要4字节的Unicode编码。如果使用utf8字符集（最多只支持3字节的Unicode字符），则无法存储这些表情符号。
  2. 使用utf8mb4字符集
    为了在MySQL数据库中支持表情符号，你需要确保数据库、表和连接使用utf8mb4字符集。这包括：
    数据库字符集：创建数据库时指定utf8mb4字符集。
  CREATE DATABASE mydatabase CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

表字符集：创建表时指定utf8mb4字符集。

  CREATE TABLE mytable (id INT PRIMARY KEY,text VARCHAR(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci);

连接字符集：确保Java应用程序与MySQL数据库的连接使用utf8mb4字符集。如果使用JDBC连接MySQL，可以在连接URL中指定字符集参数

  String url = "jdbc:mysql://localhost:3306/mydatabase?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC";

支持表情符号存储的关键是使用utf8mb4字符集。确保数据库、表和连接都正确配置了这个字符集。此外，考虑使用MySQL的较新版本以获得更好的性能和特性支持。在Java应用程序中，通过JDBC连接时，确保连接字符串正确配置了字符编码参数。

流程
  1. 表情包资源准备
    收集或设计表情图片：首先需要一组表情图片，可以是通用的表情符号，也可以是特定主题的自定义设计。
    优化图片：为了提高加载速度和减少数据传输量，应对图片进行压缩和优化。
    存储：将表情图片存储在服务器上，可以使用CDN（内容分发网络）来加速全球的访问速度。
  2. 数据库设计
    设计数据库来管理表情包和表情图片。一个基本的设计可能包括两个表：一个用于存储表情包信息，另一个用于存储表情图片信息。
  3. 前端实现
    表情选择界面：在IM客户端中实现一个表情选择界面，用户可以浏览和选择表情包中的表情。
    表情显示：在消息输入框和聊天记录中，支持显示选中的表情图片。
    快捷输入：（可选）支持通过特定的快捷方式（如输入😄）来快速插入表情。
  4. 消息处理
    表情编码：当用户发送包含表情的消息时，需要将表情转换为一种编码形式（如特定的标记或URL），以便在接收端正确解析和显示。
    表情解码：在消息接收端，解析消息内容中的表情编码，将其转换回对应的表情图片进行显示。
  5. 示例代码
    假设用户选择了一个表情，前端将表情编码为特定的标记或URL，发送到服务器。在接收端，解析这些标记并显示对应的表情图片。
    发送端：
// 假设用户选择了一个笑脸表情
const message = "你好啊 😄";
// 将表情转换为编码或URL（这里仅为示例，实际实现可能会复杂）
const encodedMessage = "你好啊 [emoji:smile]";

// 接收到的消息
const receivedMessage = "你好啊 [emoji:smile]";
// 解析消息中的表情编码，将其替换为<img>标签显示表情图片
const displayedMessage = receivedMessage.replace(/\[emoji:(\w+)\]/g, '<img src="path/to/$1.png">');
  1. 注意事项
    性能优化：考虑使用雪碧图（CSS Sprite）或WebP格式来减少HTTP请求和优化图片加载。
    兼容性：确保表情图片在不同设备和平台上都能正确显示。
    用户体验：提供易于使用的表情选择界面，支持搜索和分类浏览表情包。

聊天框前端样式

  <!-- 底部表情包 --><div class="nav-bar-chat "><ul class="nav-list"><div class="nav-list-item"><span @click="toggleEmojiPanel">😉</span></div><div class="nav-list-item"><span @click="toggleEmojiPanel">拍摄</span></div><div class="nav-list-item"><span @click="toggleEmojiPanel">图片</span></div><div class="nav-list-item"><span @click="toggleEmojiPanel">文件</span></div><div class="nav-list-item"><span @click="toggleEmojiPanel">语音</span></div><div class="nav-list-item"><span @click="toggleEmojiPanel">视频</span></div></ul><div v-if="showEmojiPanel" class="emoji-panel"><van-grid column-num="5"><van-grid-itemv-for="(emoji, index) in emojis":key="index"@click="addEmoji(emoji)"><van-imagev-if="emoji.src"width="35px"height="35px"fit="cover":src="emoji.src"/><div v-if="!emoji.src">{{ emoji.name }}</div><!-- <img :src="emoji.src" :alt="emoji.name" class="emoji-img" /> --></van-grid-item></van-grid></div></div>

更新脚本逻辑
添加或修改方法来控制表情面板的显示和隐藏。

 //切换表情面板const toggleEmojiPanel = function() {state.showEmojiPanel = !state.showEmojiPanel; // 切换表情面板的显示状态};//添加表情const addEmoji = function(emoji) {if (emoji.type == "pic") {state.content += emoji.encode;} else {state.content += emoji.name;}// 简化处理，实际应用中可能需要特殊处理state.showEmojiPanel = false; // 选择表情后关闭面板};

通过这种方式，表情面板将作为聊天输入框的直接扩展。用户可以通过点击表情按钮来显示或隐藏表情面板，并从中选择表情添加到输入框中。

表情包json
 //表情包showEmojiPanel: false, // 控制表情包面板的显示emojis: [{ id: "1", type: "base", name: "📩" },{ id: "2", type: "base", name: "🎉" },{ id: "3", type: "base", name: "👉" },{ id: "4", type: "base", name: "😉" },{ id: "5", type: "base", name: "💙" },{ id: "6", type: "base", name: "🍉" },{ id: "7", type: "base", name: "🌙" },{ id: "8", type: "base", name: "🕙" },{ id: "9", type: "base", name: "🍅" },{ id: "10", type: "base", name: "🐑" },{ id: "11", type: "base", name: "🔱" },{ id: "12", type: "base", name: "🎱" },{ id: "131", type: "base", name: "⚡" },{ id: "14", type: "base", name: "💺" },{ id: "15", type: "base", name: " 👇 " },{id: "16",type: "pic",name: " 头像 ",src:"https://edu-renyun.oss-cn-beijing.aliyuncs.com/2021/07/26/a10016be5a4348a885bc79bb7bf78ad4logo1.png",encode: "[emoji:avatar]",},{id: "17",type: "pic",name: " 头像 2",src:"https://edu-renyun.oss-cn-beijing.aliyuncs.com/2021/07/26/0ea48cb529e54573ae791ffbde3fcd9fu=2095913610,1514262792&fm=26&gp=0.jpg",encode: "[emoji:avatar2]",},// 更多表情...],
前端显示表情包方案

通过v-html来解析包含标签的消息内容。解码的时候转换成url地址。

 					 <divref="contentArea"v-html="decodeCodeToEmoji(item.content)"></div>
封装函数

为了实现点击图片将其转换为特定编码（例如[emj]）并在聊天消息框中显示，然后在显示时将编码解码为标签的功能，你可以创建两个函数：encodeEmojiToCode和decodeCodeToEmoji。以下是如何封装这两个函数的示例：

 // 将特定编码转换为<img>标签用于显示const decodeCodeToEmoji = function(message) {const avatarRegex = /\[emoji:avatar(\d+)?\]/g;let match;const avatars = state.emojis;while ((match = avatarRegex.exec(message)) !== null) {// const avatarIndex = match[1]; // 获取头像编号 // 获取头像自定义标识符（"avatar" 或 "avatar2"）const avatar = avatars.find((a) => a.encode === match[0]); // 查找对应的头像信息if (avatar) {message = message.replace(match[0],`<img src="${avatar.src}"   style="width: 25px; height: 25px; border-radius: 50%;" alt="${avatar.name}" />`);}}return message;};
使用编码和解码函数

当用户点击一个表情图片时，你可以调用encodeEmojiToCode函数将图片转换为编码，并将这个编码添加到聊天输入框的内容中。在发送消息或将消息显示到聊天界面时，使用decodeCodeToEmoji函数将编码转换回标签。

//添加表情const addEmoji = function(emoji) {if (emoji.type == "pic") {state.content += emoji.encode;} else {state.content += emoji.name;}// 简化处理，实际应用中可能需要特殊处理state.showEmojiPanel = false; // 选择表情后关闭面板};
				 <divref="contentArea"v-html="decodeCodeToEmoji(item.content)"></div>

自定义表情包结构设计

CREATE TABLE yan_im_emoji_packs (pack_id INT AUTO_INCREMENT PRIMARY KEY,pack_name VARCHAR(255) NOT NULL,description TEXT,create_time DATETIME DEFAULT CURRENT_TIMESTAMP
);CREATE TABLE yan_im_emojis (emoji_id INT AUTO_INCREMENT PRIMARY KEY,pack_id INT,emoji_url VARCHAR(255) NOT NULL,shortcut VARCHAR(50),  -- 可选，用于快速输入的快捷方式FOREIGN KEY (pack_id) REFERENCES emoji_packs(pack_id) ON DELETE CASCADE
);

这块留一个小尾巴

聊天发送消息的框其实是一个简易的富文本编辑器。因为聊天消息框支持换行，支持显示表情，支持复制粘贴等功能就是一个简易的富文本编辑器。引用其他的组件样式方面和实用性方面不太好。所以计划自己写。待做

创建富文本编辑器
  1. 创建富文本编辑器组件
    首先，创建一个新的 Vue 组件 RichTextEditor.vue：
<template><div class="rich-text-editor"><div class="toolbar"><!-- 表情按钮 --><van-button icon="smile-o" @click="insertEmoji">表情</van-button></div><divref="editor"class="editor"contenteditable="true"@input="updateContent"@blur="updateContent"></div></div>
</template><script>
export default {data() {return {content: '',};},methods: {insertEmoji() {// 示例：插入一个静态表情图片const imgHtml = '<img src="path/to/your/emoji.png" alt="emoji" class="emoji">';this.$refs.editor.innerHTML += imgHtml;this.updateContent();},updateContent() {this.content = this.$refs.editor.innerHTML;// 在这里，你可以发出事件，将内容同步到父组件或进行保存this.$emit('update:content', this.content);},},
};
</script><style scoped>
.rich-text-editor .editor {border: 1px solid #ccc;min-height: 100px;padding: 10px;margin-top: 10px;
}.emoji {width: 24px;height: 24px;
}
</style>
  1. 使用富文本编辑器组件
    在你的页面或父组件中引入并使用这个富文本编辑器组件：
<template><div><rich-text-editor @update:content="handleContentUpdate"></rich-text-editor></div>
</template><script>
import RichTextEditor from './RichTextEditor.vue';export default {components: {RichTextEditor,},methods: {handleContentUpdate(content) {console.log('Updated content:', content);// 处理更新的内容，例如保存到数据或发送到服务器},},
};
</script>

这篇关于【分布式websocket】表情怎么做？自制表情包和Unicode表情符号区别？表情编解码？【20期】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/847406。

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理；Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期
阅读更多...
Jenkins分布式集群配置方式

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》：本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目，它提供了一个容易使用的持续集成系统，并且提供了大量的plugin满
阅读更多...
Javaee多线程之进程和线程之间的区别和联系(最新整理)

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab
阅读更多...
C++中NULL与nullptr的区别小结

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL
阅读更多...
Conda与Python venv虚拟环境的区别与使用方法详解

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,：本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v
阅读更多...
Spring Boot中WebSocket常用使用方法详解

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP
阅读更多...
Go语言中make和new的区别及说明

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》：本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化
阅读更多...
C++20管道运算符的实现示例

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多，因为它实际属于c++20最为重要的
阅读更多...
Visual Studio 2022 编译C++20代码的图文步骤

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性：
阅读更多...
深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2