聊天室之表情发送

表情图片渲染

将表情包放置在public/img路径下，遍历文件渲染到前端界面

function initEmoji() {  
    //获取前端存放表情的div
    var emojiContainer = document.getElementById('emojiWrapper'), 
    docFragment = document.createDocumentFragment();  
   //遍历表情包文件，渲染到前端
    for (var i = 1; i <=68; i++) {    
        var emojiItem = document.createElement('img');   
       emojiItem.src = '/emoji/' + i + '.gif';   
       emojiItem.title = i;    
    docFragment.appendChild(emojiItem);};    
    emojiContainer.appendChild(docFragment);}

表情图片获取

此时点击表情符号会显示所有的表情，还需要控制存放表情图层在点击别处时消失，并且当点击相应表情时要获取相应的图片信息并添加至输入框一段类似于[emoji：3]的代码，代表相应的表情

function showEmoji() {  
  //点击表情时表情图层出现
    var emojiwrapper = document.getElementById('emojiWrapper'); 
    emojiwrapper.style.display = 'block';
    document.getElementById('emoji').addEventListener('click', function(e) {  
        var emojiwrapper = document.getElementById('emojiWrapper');  
        emojiwrapper.style.display = 'block';  
        e.stopPropagation();
}, false);
//没有点击表情时表情图层消失
document.body.addEventListener('click', function(e) {  
      var emojiwrapper = document.getElementById('emojiWrapper'); 
      if (e.target != emojiwrapper) {   
           emojiwrapper.style.display = 'none'; 
 };
});
document.getElementById('emojiWrapper').addEventListener('click', function(e) { 
      var target = e.target; 
      if (target.nodeName.toLowerCase() == 'img') {   
        var messageInput = document.getElementById('editArea');
        messageInput.focus();   
        //再输入框中添加相应表情信息
        messageInput.value = messageInput.value + '[emoji:' + target.title + ']';   
 };  
}, false);}

表情匹配

此时输入框中会增加一段类似[emoji：3]的代码，代表相应的表情，在页面显示的时候，我们需要将这个代码替换成相应的表情代码

function _showEmoji(msg) {  
    var match, result = msg,      
    reg = /\[emoji:\d+\]/g,      
    emojiIndex,     
     totalEmojiNum =document.getElementById('emojiWrapper').children.length;  
    while (match = reg.exec(msg)) {   
       emojiIndex = match[0].slice(7, -1);    
       if (emojiIndex > totalEmojiNum) {      
          result = result.replace(match[0], '[X]');  }
       else {      
          result = result.replace(match[0], '');    };  }; 
 return result;
}

表情发送

此时调用_showEmoji将表情信息匹配成表情图片，添加到发送信息，表情功能就实现啦！

function doSend(e) {  
  if (e.which  === 13) {   
     e.preventDefault();    
  var msg = $(this).val();    
//将表情匹配后的内容添加到msg并发送
  msg =  _showEmoji(msg);     
  $(this).val('');    
  socket.send(_id,fid,msg);}
}