发送图片分为三种情况
- 表情包的发送
- 本地图片的发送
- 截图之后ctrl+v发送
表情包的发送
因为表情包是每个客户端都有的，那么只需要获取好友发送给用户的表情包是哪个，并取出来显示即可
//初始化表情列表
function initEmoji() {
for(var i=69;i>0;i--){
$('#emojiWrapper').append(
'<img src="/emoji/'+i+'.gif">'
)
}
}
选择表情之后，获取该表情的下标，并在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('<li class="'+(user === "me" ? "me" : "other")+'">'+
'<div class="time">'+
'<span>time</span>'+
'</div>'+
'<div class="msg">'+
'<img src="/images/2.jpg" class="img-rounded">'+
'<p>'+msg+'</p>'+
'</div>'+
'</li>'
);
$("#v"+fid).scrollTop($("#v"+fid)[0].scrollHeight);
}
//判断消息中是不是有表情，有就更改msg
function displayEmoji(msg){
var reg = /\[emoji:\d+\]/g;
var match;
var emojiIndex;
var result=msg;
//用正则表达式来判断这条消息里面有没有表情的信息,有的话就替换成<img>的形式，将表情显示出来
while(match = reg.exec(msg)){
emojiIndex=match[0].slice(7,-1);
result=result.replace(match[0], '<img src="/emoji/'+emojiIndex+'.gif">');
}
return result;
}
发送本地的图片给好友
使用base64实现socket.io传输图片和声音文件
利用FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
浏览器端的代码使用readAsDataURL()得到base64 encoded string
readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
上传图片
<label id="showImage">
<input id="image" type="file" name="file" value="file" accept="image/*"/>
<i class="fa fa-picture-o"></i>
</label>
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('<li class="'+(user === "me" ? "me" : "other")+'">'+
'<div class="time">'+
'<span>time</span>'+
'</div>'+
'<div class="msg">'+
'<img src="/images/2.jpg" class="img-rounded">'+
'<img class="ownImg" src="'+img+'"/>'+
'</div>'+
'</li>'
);
$("#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<data.length;i++) {
var fromID=data[i].from;
var toId=data[i].to;
if(uid == fromID) {
if(fid==toId) {
if(data[i].content.indexOf(';base64,')!=-1){
displayNewImg('me',data[i].content);
}else{
displayNewMsg('me', data[i].content);
}
}
} else if(fid == fromID) {
if(uid ==toId){
if(data[i].content.indexOf(';base64,')!=-1){
displayNewImg(fid,data[i].content);
}else{
displayNewMsg(fid, data[i].content);
}
}
} else {
console.log("the news chat with others");
}
}
}
});
}
获取粘贴事件不能直接用e.clipboardData
要用e.originalEvent.clipboardData;
参考网址:http://stackoverflow.com/questions/2787669/get-html-from-clipboard-in-javascript
