微信聊天系统之发送图片

发送图片分为三种情况

• 表情包的发送
• 本地图片的发送
• 截图之后ctrl+v发送

表情包的发送

因为表情包是每个客户端都有的，那么只需要获取好友发送给用户的表情包是哪个，并取出来显示即可

//初始化表情列表
function initEmoji() {
  for(var i=69;i>0;i--){
    $('#emojiWrapper').append(
      ''
    )
  }
}

选择表情之后，获取该表情的下标，并在textarea里面显示为[emoji:下标]的形式，在
数据库里面以字符串[emoji:下标]的形式储存

 $("#emojiWrapper img").click(function () {
     src=$(this).attr("src");
     msg=$("#messageInput").val();
    $("#messageInput").val(msg+"[emoji:"+src.slice(7,-4)+"]");
  });

点击发送后与之前的发送消息一样

function doSend() {
    var msg=$('#messageInput').val();
    $('#messageInput').val('');
    socket.emit('private message',uid,fid,msg);
    displayNewMsg('me', msg);
    return false;
}

把表情显示出来

function displayNewMsg(user, msg) {

     msg=displayEmoji(msg);

    $("#v"+fid).append('
'+
        '
'+
        'time'+
        '
'+
        '
'+
        ''+
        '
'+msg+'
'+
        '
'+
        '
'
    );
    $("#v"+fid).scrollTop($("#v"+fid)[0].scrollHeight);
}

//判断消息中是不是有表情，有就更改msg
function displayEmoji(msg){
  var reg = /\[emoji:\d+\]/g;
  var match;
  var emojiIndex;
  var result=msg;
  //用正则表达式来判断这条消息里面有没有表情的信息,有的话就替换成的形式，将表情显示出来
  while(match = reg.exec(msg)){
      emojiIndex=match[0].slice(7,-1);
      result=result.replace(match[0], '');
  }
  return result;
}

发送本地的图片给好友

使用base64实现socket.io传输图片和声音文件
利用FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
浏览器端的代码使用readAsDataURL()得到base64 encoded string
readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
上传图片

chat.js 触发上传事件后

 $('body').on('change','#image',doSendImage);
//发送图片
function doSendImage(){
  var file = this.files[0],
    reader = new FileReader();
  reader.onload = function(e) {
     socket.emit('sendImg',uid,fid, e.target.result);
     displayNewImg('me',e.target.result);
};
  reader.readAsDataURL(file);
}
//图片的显示
function displayNewImg(user,img){
  $("#v"+fid).append('
'+
    '
'+
    'time'+
    '
'+
    '
'+
    ''+
    ''+
    '
'+
    '
'
  );
  $("#v"+fid).scrollTop($("#v"+fid)[0].scrollHeight);
}

www 服务器端的代码与一般的文本信息发送无异：

 socket.on('sendImg',function (uid,fid,img) {
    var status;

    if(online.indexOf(fid)!==-1){
      status = 1;
      sockets[users[fid]].socket.emit('newImg',fid,img);
    } else{
      // 如果不在线的话，状态为0
      status = 0;
    }
    var data={
      userId: uid,
      from: uid,
      to: fid,
      status: status,
      content: img
    }
    //将图片转换成的编码作为消息存到数据库中去
    dbHelper.addMsg(data,function (success,doc) {
      console.log("right");
    });
  });

截图之后ctrl+v发送

原理和发送本地图片一样，同样是转为base64编码，就是一开始要触发paste事件，并获得paste之后的值
chat.js添加paste事件

 $('body').on('paste','#messageInput',doPaste);
//ctrl+v粘贴之后发送图片
function doPaste(e){
    var clipboardData = e.originalEvent.clipboardData;
    if(clipboardData) {
        for(var i = 0; i < clipboardData.items.length; i++) {
          var c = clipboardData.items[i];
          var file = c.getAsFile();
          var reader = new FileReader();
          reader.onload = function(e) {
              socket.emit('sendImg',uid,fid,e.target.result);
              displayNewImg('me',e.target.result);
          }
          reader.readAsDataURL(file);
        }
    }
}

由于初始化历史消息的时候，要区分base64编码和文字信息
更改初始化消息事件

//选择好友聊天时，初始化与好友的聊天记录
function initMsg() {
    $.ajax({
        type: "POST",
        url: "/users/initMsg",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
            'userId': uid,
            'fid': fid
        }),
        success: function (data) {
            for(var i=0; i

获取粘贴事件不能直接用e.clipboardData
要用e.originalEvent.clipboardData;
参考网址:http://stackoverflow.com/questions/2787669/get-html-from-clipboard-in-javascript