vue websocket 聊天之发送表情

万事开头难，第一次接触websocket客服聊天聊天得我，也遇到了许多坑，被折磨过来得我，今天总结下一部分功能（发送表情）我也是借鉴了别人得代码，然后简化后，功能也实现了。

 <!-- 聊天记录得界面 --><div class="common_chat-main" id="common_chat_main" ref="common_chat_main"><div class="common_chat-main-content"><div v-for="(item,index) in ChatEnArr.msgList" :key="index" style="overflow: hidden;"><div class="chatLeft" v-if="item.role==1">  <img class="kfPic" style="border-radius: 100%;" :src="item.avatarUrl" alt="">**<div class="chatBox"><p class="leftCk item-content common_chat_emoji-wrapper-global" v-if="item.contentType=='text'" v-html="getqqemojiEmoji(item.content)"></p>重点就在于（v-html="getqqemojiEmoji(item.content)"）通过v-html吧数据渲染在界面上</div>**<img class="imgPic" v-if="item.contentType=='image'" :src="item.content" @click="imgViewDialog_show(item.content)" alt=""></div><div class="chatRight" v-if="item.role==0"><div class="chatBox" v-if="item.contentType=='text'"><p  class="leftCk item-content common_chat_emoji-wrapper-global"  v-html="getqqemojiEmoji(item.content)"></p></div><img class="imgPic" v-if="item.contentType=='image'" :src="item.content" @click="imgViewDialog_show(item.content)" alt=""><img class="kfPic" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3421370747,2851767462&fm=26&gp=0.jpg" alt=""></div></div></div></div>

    <!-- 底部区域 （表情，文件，输入内容，发送）--><div class="common_chat-footer"><div><!-- 文件选择等操作 --><div class="opr-wrapper">表情选择得组件**<common-chat-emoji class="item" ref="qqemoji" @select="qqemoji_selectFace"></common-chat-emoji>**<i style="font-size: 20px;" class="iconfont icon-tupian" @click="uploadPic(ChatEnArr.clientChatId)"></i></div><!-- 聊天输入框 --><div class="input-wrapper">这个是输入框（重点）**<divmaxlength="500"class="inputContent common_chat_emoji-wrapper-global"id="common_chat_input"contenteditable="true"></div></div>**<!-- 发送按钮 --><el-buttontype="primary"size="small"class="send-btn"@click="sendText(ChatEnArr.clientChatId)">发送</el-button></div></div></div>

如何实现发送表情呢？

 引入组件import common_chat_emoji from './common_chat_emoji.vue';注册组件components: {commonChatEmoji: common_chat_emoji},//这部分就是上面说得为了吧内容，表情显示在聊天框上，照搬就行/*** 转换为QQ表情(聊天显示的时候)*/getqqemojiEmoji: function(value) {if (value == undefined) {return;}var self = this;return value.replace(/\[(.+?)\]/g, function(item, value) {return self.$refs.qqemoji.getImgByFaceName(value);});},//这句是重点，将你选中的表情append到聊天框里rs.imgStr（打印出来就是 img标签）/*** qqemoji选中表情*/qqemoji_selectFace: function(rs) {// for(var i in rs){$("#common_chat_input").append(rs.imgStr);// }},

//表情组件(新建vue文件，名字common_chat_emoji.vue)
注意：css里有个图片路径，记得改你自己的

<!-- qq表情 -->
<template><div class="common_chat_emoji-wrapper common_chat_emoji-wrapper-global"><i style="font-size: 20px;cursor: pointer;" class="iconfont icon-biaoqing" @click="toggleFaceHidden"></i><div class="list-wrapper" v-show="!faceHidden"><div class="list-inner" @click="selectFace"><a v-for="(item, index)  in qqemojiList" :key="index" class="item qqemoji" :title="item" :text="[item]" :class="'qqemoji'+index"></a></div></div></div>
</template><script>
export default {data() {return {qqemojiList: ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '愉快', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '悠闲', '奋斗', '咒骂', '疑问', '嘘', '晕', '疯了', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '嘴唇', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '投降', '激动', '乱舞', '献吻', '左太极', '右太极'],faceHidden: true};},methods: {/*** 切换表情界面的显示*/toggleFaceHidden: function() {this.$data.faceHidden = !this.$data.faceHidden;},/*** 关闭表情窗口*/hideFaceWrapper: function() {var self = this;// 选中face也会隐藏表情窗口，这时判断是否已经隐藏了setTimeout(function() {if (!self.$data.faceHidden) {self.$data.faceHidden = true;}}, 200);},/*** 选中face*/selectFace: function(e) {var faceName = e.target.getAttribute('text');if (!faceName) {return;}var imgStr = this.getImgByFaceName(faceName);this.$emit('select', {faceName: faceName,imgStr: imgStr}); // 事件上传// 关闭窗口this.$data.faceHidden = true;},/*** 根据face名称返回一个img图片* @param {String} faceName face名称*/getImgByFaceName: function(faceName) {var imgStr = '<img class="qqemoji small qqemoji@faceIndex" text="@faceName" src="/static/img/im_emoji_spacer.gif"/>';var faceIndex = 0;for (var i = 0; i < this.$data.qqemojiList.length; i++) {if (this.$data.qqemojiList[i] == faceName) {faceIndex = i;break;}}imgStr = imgStr.replace(/@faceIndex/g, faceIndex).replace(/@faceName/g, faceName);return imgStr;}},mounted() {}
};
</script><style lang="less">
.common_chat_emoji-wrapper {.iconfont {color: #aaa;font-size: 20px;}.list-wrapper {height: 240px;width: 440px;background-color: #fff;border: 1px solid #e6e6e6;padding: 10px;position: absolute;top: -240px;left: 1px;.list-inner {width: 100%;height: 100%;overflow: hidden;.item {float: left;border-bottom: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;cursor: pointer;}}}
}.common_chat_emoji-wrapper-global {.qqemoji {width: 28px;height: 28px;font-size: 0;text-indent: -999em;background: url('../../../../static/img/qqEmoji.png') 0 0 no-repeat;}.qqemoji.small {vertical-align: middle;height: 24px !important;width: 24px;transform: scale(0.82);margin-top: -5px;margin-left: -3px;}.qqemoji.qqemoji0 {background-position: 0 0;}.qqemoji.qqemoji1 {background-position: -29px 0;}.qqemoji.qqemoji2 {background-position: -58px 0;}.qqemoji.qqemoji3 {background-position: -87px 0;}.qqemoji.qqemoji4 {background-position: -116px 0;}.qqemoji.qqemoji5 {background-position: -145px 0;}.qqemoji.qqemoji6 {background-position: -174px 0;}.qqemoji.qqemoji7 {background-position: -203px 0;}.qqemoji.qqemoji8 {background-position: -232px 0;}.qqemoji.qqemoji9 {background-position: -261px 0;}.qqemoji.qqemoji10 {background-position: -290px 0;}.qqemoji.qqemoji11 {background-position: -319px 0;}.qqemoji.qqemoji12 {background-position: -348px 0;}.qqemoji.qqemoji13 {background-position: -377px 0;}.qqemoji.qqemoji14 {background-position: -406px 0;}.qqemoji.qqemoji15 {background-position: 0 -29px;}.qqemoji.qqemoji16 {background-position: -29px -29px;}.qqemoji.qqemoji17 {background-position: -58px -29px;}.qqemoji.qqemoji18 {background-position: -87px -29px;}.qqemoji.qqemoji19 {background-position: -116px -29px;}.qqemoji.qqemoji20 {background-position: -145px -29px;}.qqemoji.qqemoji21 {background-position: -174px -29px;}.qqemoji.qqemoji22 {background-position: -203px -29px;}.qqemoji.qqemoji23 {background-position: -232px -29px;}.qqemoji.qqemoji24 {background-position: -261px -29px;}.qqemoji.qqemoji25 {background-position: -290px -29px;}.qqemoji.qqemoji26 {background-position: -319px -29px;}.qqemoji.qqemoji27 {background-position: -348px -29px;}.qqemoji.qqemoji28 {background-position: -377px -29px;}.qqemoji.qqemoji29 {background-position: -406px -29px;}.qqemoji.qqemoji30 {background-position: 0 -58px;}.qqemoji.qqemoji31 {background-position: -29px -58px;}.qqemoji.qqemoji32 {background-position: -58px -58px;}.qqemoji.qqemoji33 {background-position: -87px -58px;}.qqemoji.qqemoji34 {background-position: -116px -58px;}.qqemoji.qqemoji35 {background-position: -145px -58px;}.qqemoji.qqemoji36 {background-position: -174px -58px;}.qqemoji.qqemoji37 {background-position: -203px -58px;}.qqemoji.qqemoji38 {background-position: -232px -58px;}.qqemoji.qqemoji39 {background-position: -261px -58px;}.qqemoji.qqemoji40 {background-position: -290px -58px;}.qqemoji.qqemoji41 {background-position: -319px -58px;}.qqemoji.qqemoji42 {background-position: -348px -58px;}.qqemoji.qqemoji43 {background-position: -377px -58px;}.qqemoji.qqemoji44 {background-position: -406px -58px;}.qqemoji.qqemoji45 {background-position: 0 -87px;}.qqemoji.qqemoji46 {background-position: -29px -87px;}.qqemoji.qqemoji47 {background-position: -58px -87px;}.qqemoji.qqemoji48 {background-position: -87px -87px;}.qqemoji.qqemoji49 {background-position: -116px -87px;}.qqemoji.qqemoji50 {background-position: -145px -87px;}.qqemoji.qqemoji51 {background-position: -174px -87px;}.qqemoji.qqemoji52 {background-position: -203px -87px;}.qqemoji.qqemoji53 {background-position: -232px -87px;}.qqemoji.qqemoji54 {background-position: -261px -87px;}.qqemoji.qqemoji55 {background-position: -290px -87px;}.qqemoji.qqemoji56 {background-position: -319px -87px;}.qqemoji.qqemoji57 {background-position: -348px -87px;}.qqemoji.qqemoji58 {background-position: -377px -87px;}.qqemoji.qqemoji59 {background-position: -406px -87px;}.qqemoji.qqemoji60 {background-position: 0 -116px;}.qqemoji.qqemoji61 {background-position: -29px -116px;}.qqemoji.qqemoji62 {background-position: -58px -116px;}.qqemoji.qqemoji63 {background-position: -87px -116px;}.qqemoji.qqemoji64 {background-position: -116px -116px;}.qqemoji.qqemoji65 {background-position: -145px -116px;}.qqemoji.qqemoji66 {background-position: -174px -116px;}.qqemoji.qqemoji67 {background-position: -203px -116px;}.qqemoji.qqemoji68 {background-position: -232px -116px;}.qqemoji.qqemoji69 {background-position: -261px -116px;}.qqemoji.qqemoji70 {background-position: -290px -116px;}.qqemoji.qqemoji71 {background-position: -319px -116px;}.qqemoji.qqemoji72 {background-position: -348px -116px;}.qqemoji.qqemoji73 {background-position: -377px -116px;}.qqemoji.qqemoji74 {background-position: -406px -116px;}.qqemoji.qqemoji75 {background-position: 0 -145px;}.qqemoji.qqemoji76 {background-position: -29px -145px;}.qqemoji.qqemoji77 {background-position: -58px -145px;}.qqemoji.qqemoji78 {background-position: -87px -145px;}.qqemoji.qqemoji79 {background-position: -116px -145px;}.qqemoji.qqemoji80 {background-position: -145px -145px;}.qqemoji.qqemoji81 {background-position: -174px -145px;}.qqemoji.qqemoji82 {background-position: -203px -145px;}.qqemoji.qqemoji83 {background-position: -232px -145px;}.qqemoji.qqemoji84 {background-position: -261px -145px;}.qqemoji.qqemoji85 {background-position: -290px -145px;}.qqemoji.qqemoji86 {background-position: -319px -145px;}.qqemoji.qqemoji87 {background-position: -348px -145px;}.qqemoji.qqemoji88 {background-position: -377px -145px;}.qqemoji.qqemoji89 {background-position: -406px -145px;}.qqemoji.qqemoji90 {background-position: 0 -174px;}.qqemoji.qqemoji91 {background-position: -29px -174px;}.qqemoji.qqemoji92 {background-position: -58px -174px;}.qqemoji.qqemoji93 {background-position: -87px -174px;}.qqemoji.qqemoji94 {background-position: -116px -174px;}.qqemoji.qqemoji95 {background-position: -145px -174px;}.qqemoji.qqemoji96 {background-position: -174px -174px;}.qqemoji.qqemoji97 {background-position: -203px -174px;}.qqemoji.qqemoji98 {background-position: -232px -174px;}.qqemoji.qqemoji99 {background-position: -261px -174px;}.qqemoji.qqemoji100 {background-position: -290px -174px;}.qqemoji.qqemoji101 {background-position: -319px -174px;}.qqemoji.qqemoji102 {background-position: -348px -174px;}.qqemoji.qqemoji103 {background-position: -377px -174px;}.qqemoji.qqemoji104 {background-position: -406px -174px;}
}
</style><!-- qq表情 -->
<!-- <template><div class="common_chat_emoji-wrapper common_chat_emoji-wrapper-global"><i style="font-size: 20px;cursor: pointer;" class="iconfont icon-biaoqing" @click="toggleFaceHidden"></i><div class="list-wrapper" v-show="!faceHidden"><div class="list-inner" @click="selectFace"><a v-for="(item, index)  in qqemojiList" :key="index" class="item qqemoji" :title="item" :text="[item]" :class="'qqemoji'+index"></a></div></div><input type="text" id="imLog_qqemoji_txt" @blur="hideFaceWrapper" style="width:0px;height:0px;border: 0px;background-color: #fff;" /></div>
</template><script>
export default {data() {return {qqemojiList: ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '愉快', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '悠闲', '奋斗', '咒骂', '疑问', '嘘', '晕', '疯了', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '嘴唇', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '投降', '激动', '乱舞', '献吻', '左太极', '右太极'],faceHidden: true,faceNameArray:[]};},methods: {/*** 切换表情界面的显示*/toggleFaceHidden: function() {this.$data.faceHidden = !this.$data.faceHidden;if (!this.$data.faceHidden) {document.getElementById('imLog_qqemoji_txt').focus();}},/*** 关闭表情窗口*/hideFaceWrapper: function() {var self = this;// 选中face也会隐藏表情窗口，这时判断是否已经隐藏了setTimeout(function() {if (!self.$data.faceHidden) {self.$data.faceHidden = true;}}, 200);},/*** 选中face*/selectFace: function(e) {var faceName = e.target.getAttribute('text');if (!faceName) {return;}var imgStr = this.getImgByFaceName(faceName);this.faceNameArray.push({faceName: faceName,imgStr: imgStr})this.$emit('select',this.faceNameArray); // 事件上传this.faceNameArray=[];// this.$emit('select',{//     faceName: faceName,//     imgStr: imgStr// }); // 事件上传// 关闭窗口this.$data.faceHidden = true;},/*** 根据face名称返回一个img图片* @param {String} faceName face名称*/getImgByFaceName: function(faceName) {var imgStr = '<img class="qqemoji small qqemoji@faceIndex" text="@faceName" src="/static/img/im_emoji_spacer.gif"/>';var faceIndex = 0;for (var i = 0; i < this.$data.qqemojiList.length; i++) {if (this.$data.qqemojiList[i] == faceName) {faceIndex = i;break;}}imgStr = imgStr.replace(/@faceIndex/g, faceIndex).replace(/@faceName/g, faceName);return imgStr;}},mounted() {}
};
</script><style lang="less">
.common_chat_emoji-wrapper {.iconfont {color: #aaa;font-size: 20px;}.list-wrapper {height: 240px;width: 440px;background-color: #fff;border: 1px solid #e6e6e6;padding: 10px;position: absolute;top: -240px;left: 1px;.list-inner {width: 100%;height: 100%;overflow: hidden;.item {float: left;border-bottom: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;cursor: pointer;}}}
}.common_chat_emoji-wrapper-global {.qqemoji {width: 28px;height: 28px;font-size: 0;text-indent: -999em;background: url('../../../../static/img/qqEmoji.png') 0 0 no-repeat;}.qqemoji.small {vertical-align: middle;height: 24px !important;width: 24px;transform: scale(0.82);margin-top: -5px;margin-left: -3px;}.qqemoji.qqemoji0 {background-position: 0 0;}.qqemoji.qqemoji1 {background-position: -29px 0;}.qqemoji.qqemoji2 {background-position: -58px 0;}.qqemoji.qqemoji3 {background-position: -87px 0;}.qqemoji.qqemoji4 {background-position: -116px 0;}.qqemoji.qqemoji5 {background-position: -145px 0;}.qqemoji.qqemoji6 {background-position: -174px 0;}.qqemoji.qqemoji7 {background-position: -203px 0;}.qqemoji.qqemoji8 {background-position: -232px 0;}.qqemoji.qqemoji9 {background-position: -261px 0;}.qqemoji.qqemoji10 {background-position: -290px 0;}.qqemoji.qqemoji11 {background-position: -319px 0;}.qqemoji.qqemoji12 {background-position: -348px 0;}.qqemoji.qqemoji13 {background-position: -377px 0;}.qqemoji.qqemoji14 {background-position: -406px 0;}.qqemoji.qqemoji15 {background-position: 0 -29px;}.qqemoji.qqemoji16 {background-position: -29px -29px;}.qqemoji.qqemoji17 {background-position: -58px -29px;}.qqemoji.qqemoji18 {background-position: -87px -29px;}.qqemoji.qqemoji19 {background-position: -116px -29px;}.qqemoji.qqemoji20 {background-position: -145px -29px;}.qqemoji.qqemoji21 {background-position: -174px -29px;}.qqemoji.qqemoji22 {background-position: -203px -29px;}.qqemoji.qqemoji23 {background-position: -232px -29px;}.qqemoji.qqemoji24 {background-position: -261px -29px;}.qqemoji.qqemoji25 {background-position: -290px -29px;}.qqemoji.qqemoji26 {background-position: -319px -29px;}.qqemoji.qqemoji27 {background-position: -348px -29px;}.qqemoji.qqemoji28 {background-position: -377px -29px;}.qqemoji.qqemoji29 {background-position: -406px -29px;}.qqemoji.qqemoji30 {background-position: 0 -58px;}.qqemoji.qqemoji31 {background-position: -29px -58px;}.qqemoji.qqemoji32 {background-position: -58px -58px;}.qqemoji.qqemoji33 {background-position: -87px -58px;}.qqemoji.qqemoji34 {background-position: -116px -58px;}.qqemoji.qqemoji35 {background-position: -145px -58px;}.qqemoji.qqemoji36 {background-position: -174px -58px;}.qqemoji.qqemoji37 {background-position: -203px -58px;}.qqemoji.qqemoji38 {background-position: -232px -58px;}.qqemoji.qqemoji39 {background-position: -261px -58px;}.qqemoji.qqemoji40 {background-position: -290px -58px;}.qqemoji.qqemoji41 {background-position: -319px -58px;}.qqemoji.qqemoji42 {background-position: -348px -58px;}.qqemoji.qqemoji43 {background-position: -377px -58px;}.qqemoji.qqemoji44 {background-position: -406px -58px;}.qqemoji.qqemoji45 {background-position: 0 -87px;}.qqemoji.qqemoji46 {background-position: -29px -87px;}.qqemoji.qqemoji47 {background-position: -58px -87px;}.qqemoji.qqemoji48 {background-position: -87px -87px;}.qqemoji.qqemoji49 {background-position: -116px -87px;}.qqemoji.qqemoji50 {background-position: -145px -87px;}.qqemoji.qqemoji51 {background-position: -174px -87px;}.qqemoji.qqemoji52 {background-position: -203px -87px;}.qqemoji.qqemoji53 {background-position: -232px -87px;}.qqemoji.qqemoji54 {background-position: -261px -87px;}.qqemoji.qqemoji55 {background-position: -290px -87px;}.qqemoji.qqemoji56 {background-position: -319px -87px;}.qqemoji.qqemoji57 {background-position: -348px -87px;}.qqemoji.qqemoji58 {background-position: -377px -87px;}.qqemoji.qqemoji59 {background-position: -406px -87px;}.qqemoji.qqemoji60 {background-position: 0 -116px;}.qqemoji.qqemoji61 {background-position: -29px -116px;}.qqemoji.qqemoji62 {background-position: -58px -116px;}.qqemoji.qqemoji63 {background-position: -87px -116px;}.qqemoji.qqemoji64 {background-position: -116px -116px;}.qqemoji.qqemoji65 {background-position: -145px -116px;}.qqemoji.qqemoji66 {background-position: -174px -116px;}.qqemoji.qqemoji67 {background-position: -203px -116px;}.qqemoji.qqemoji68 {background-position: -232px -116px;}.qqemoji.qqemoji69 {background-position: -261px -116px;}.qqemoji.qqemoji70 {background-position: -290px -116px;}.qqemoji.qqemoji71 {background-position: -319px -116px;}.qqemoji.qqemoji72 {background-position: -348px -116px;}.qqemoji.qqemoji73 {background-position: -377px -116px;}.qqemoji.qqemoji74 {background-position: -406px -116px;}.qqemoji.qqemoji75 {background-position: 0 -145px;}.qqemoji.qqemoji76 {background-position: -29px -145px;}.qqemoji.qqemoji77 {background-position: -58px -145px;}.qqemoji.qqemoji78 {background-position: -87px -145px;}.qqemoji.qqemoji79 {background-position: -116px -145px;}.qqemoji.qqemoji80 {background-position: -145px -145px;}.qqemoji.qqemoji81 {background-position: -174px -145px;}.qqemoji.qqemoji82 {background-position: -203px -145px;}.qqemoji.qqemoji83 {background-position: -232px -145px;}.qqemoji.qqemoji84 {background-position: -261px -145px;}.qqemoji.qqemoji85 {background-position: -290px -145px;}.qqemoji.qqemoji86 {background-position: -319px -145px;}.qqemoji.qqemoji87 {background-position: -348px -145px;}.qqemoji.qqemoji88 {background-position: -377px -145px;}.qqemoji.qqemoji89 {background-position: -406px -145px;}.qqemoji.qqemoji90 {background-position: 0 -174px;}.qqemoji.qqemoji91 {background-position: -29px -174px;}.qqemoji.qqemoji92 {background-position: -58px -174px;}.qqemoji.qqemoji93 {background-position: -87px -174px;}.qqemoji.qqemoji94 {background-position: -116px -174px;}.qqemoji.qqemoji95 {background-position: -145px -174px;}.qqemoji.qqemoji96 {background-position: -174px -174px;}.qqemoji.qqemoji97 {background-position: -203px -174px;}.qqemoji.qqemoji98 {background-position: -232px -174px;}.qqemoji.qqemoji99 {background-position: -261px -174px;}.qqemoji.qqemoji100 {background-position: -290px -174px;}.qqemoji.qqemoji101 {background-position: -319px -174px;}.qqemoji.qqemoji102 {background-position: -348px -174px;}.qqemoji.qqemoji103 {background-position: -377px -174px;}.qqemoji.qqemoji104 {background-position: -406px -174px;}
}
</style>-->

那张图片，另存为就行

最后一步，发送（重点）
表情和文字存入的格式为（你好[哈哈][微笑]）

 sendText(currectId){//htmlStr就是获取到输入框的内容var htmlStr = document.getElementById('common_chat_input').innerHTML;//通过正则匹配显示出文字，表情var tmpInputContent = htmlStr.replace(/<img .+?text=\"(.+?)\".+?>/g, '[$1]').replace(/<.+?>/g, '');},

有什么不懂得可以留言

vue websocket 聊天之发送表情相关推荐

contenteditable H5聊天室发送表情
遇到个需求是在H5页面聊天室中可以发送表情,普通的发送信息已经做过了是借助的websocket,发表情类似于QQ微信那样,既需要展示在输入框中,又需要发送给后台,回显到聊天室让大家都看到,这个还是需要 ...
php做到聊天发图片,网页聊天框发送表情图片实现方法
话不多说,单刀直入正题. NO 1:标签定义方法这种方法和平常使用的输入框没什么区别,一个textarea解决问题,原理是输入特定格式的文字符号,显示的时候通过定义的规则解析,显示表情,至于图片则是 ...
网页聊天框发送表情图片实现方法
话不多说,单刀直入正题. NO 1:标签定义方法这种方法和平常使用的输入框没什么区别,一个textarea解决问题,原理是输入特定格式的文字符号,显示的时候通过定义的规则解析,显示表情,至于图片则是 ...
php聊天室发送表情,聊天室之表情发送
表情图片渲染将表情包放置在public/img路径下,遍历文件渲染到前端界面 function initEmoji() { //获取前端存放表情的div var emojiContainer = d ...
vue+websocket+express+mongodb实战项目（实时聊天）（一）
##vue+websocket+express+mongodb实战项目(实时聊天)(一) 在原来基础上增加了多个聊天室以及发送图片[vue+websocket+express+mongodb实战项目( ...
IM聊天教程:发送图片/视频/语音/表情
经常有朋友问起,如何在IM即时通讯中实现发送图片.视频.语音和表情?为此,小编特意写了一个vue版本的Demo,实现了图片视频文件和表情的的发送,参考这个Demo源代码,相信你就可以轻松的用Uniap ...
vue实现聊天+图片表情功能
项目需求是这样的:要求实现类似于微信聊天一样,表情+文字效果 "文字效果
django+vue3实现websocket聊天室（群聊）
1.如何实现聊天功能 2.什么是websocket 2.1解释什么叫全双工,半双工,单工 3.websocker的概念 4.websocket的优点 5.django ,vue如何实现websocke ...
uni-app 111发送表情包功能
chat.js import $U from "./util.js"; import $H from './request.js'; class chat {constructor ...

vue websocket 聊天之发送表情

vue websocket 聊天之发送表情相关推荐

最新文章

热门文章