网页聊天室之qq表情支持

显示效果图

Paste_Image.png

1. 下载 jQuery QQ表情插件 jquery.qqFace.js

下载链接 http://www.jq22.com/jquery-info365
下载文件中加入了jquery-browser.js，低于jquery 1.9.0版本的可以不调用
将表情包放在 public/images 中

2. 使用方法

HTML
首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件。

<script type="text/javascript" src="jquery.min.js">
</script> <script type="text/javascript" src="jquery.qqFace.js"></script>

  <!--qq表情-->
<div class="emotion"></div>
<form action="">
    <div class="send-bd">
        <textarea class="textarea" id="msg" name="msg" required></textarea>
        <button type="submit" class="btn btn-primary pull-right" id="sendBtn">发送</button>
    </div>
</form>

JS
点击页面输入框下方那个笑脸时，触发调用qqface表情插件

// qq表情
$('#emotion').qqFace({   //表情转换
    id: 'facebox',  //表情盒子的ID
    assign: 'msg',  //给那个id为msg的控件赋值
    path: 'images/face/' //表情存放的路径
});

当选择表情图片后，输入框中会插入一段如[em_5]之类的代码，代表插入的表情图片，实际应用中，点提交按钮后应该将这段表情代码连同其他内容发送给对方并保存到数据库中。而在页面显示的时候，我们应该将表情代码替换成真正的图片显示在页面上

// 匹配表情字符
function replace_em(str) {
    str = str.replace(/\</g, '<');
    str = str.replace(/\>/g, '>');
    str = str.replace(/\n/g, '<br/>');
    str = str.replace(/\[em_([0-9]*)\]/g, '<img src="images/face/$1.gif" border="0" />');
    return str;
}

在发送给对方时直接emit带表情代码的消息，保存到数据库也是：

socket.emit('chat message', msg);
doAddMsg(0, data.ctn, data.from, data.to);

客户端接收到消息以及显示离线消息、取出聊天消息时匹配表情字符：

var html = $.format(FROM_MSG, replace_em(data.msg));

完