zoukankan      html  css  js  c++  java
  • Web聊天应用中的表情插件

    聊天应用中的表情插件

    用于即时聊天应用的图片表情插件,具有展示表情、插入表情和表情编解码的功能

    项目地址

    看代码

    看demo

    原理介绍

    web端的即时聊天中看到的表情,其实就是一张张表情图片,通过img标签引用并展示在页面上。在整个聊天的流程上主要有这几个要点:

    • 当用户要发送表情时,首先要显示表情列表,让用户可以从中选择要发送的表情。然后通过插入表情的功能,将表情插入到当前光标所在的位置。这里有一个小技巧,如果输入框用<input type="text">的话,是无法在输入框中显示表情图片的,这样用户无法直观的看到他想发送的表情。可以使用H5中的新特性contenteditable,使div变为可编辑状态,就可以显示表情图片了。
    • 用户点击了发送之后,将输入框中的内容进行编码,用户输入框中的内容应该类似于你好啊<img src="arclist/1.gif">,编码之后会得到你好啊[em_1],就可以将之发送或者存储。
    • 当用户页面读取到聊天内容时,会得到你好啊[em_1]这样的字符串,其中[em_1]就是表情图片对应的编码,进行解码后,[em_1]会解析成<img src="arclist/1.gif">,然后直接渲染到页面中,用户就能看到对应的表情图片了。

    代码注释比较详细,使用的时候可以根据项目的具体情况,做一些适当的修改。

  • 相关阅读:
    回调函数设计方法
    C 时间函数总结
    linux多线程全面解析
    从为知笔记收费说起
    C++中strftime()的详细说明
    arguments.callee
    arguments 对象
    学习闭包
    this的call,apply,bind的方法总结--追梦子
    this指向--取自追梦子的文章
  • 原文地址:https://www.cnblogs.com/MrEgg1013/p/7275250.html
Copyright © 2011-2022 走看看