發(fā)送圖片分為三種情況
- 表情包的發(fā)送
- 本地圖片的發(fā)送
- 截圖之后ctrl+v發(fā)送
表情包的發(fā)送
因?yàn)楸砬榘敲總€(gè)客戶端都有的，那么只需要獲取好友發(fā)送給用戶的表情包是哪個(gè)疯搅，并取出來顯示即可
//初始化表情列表
function initEmoji() {
for(var i=69;i>0;i--){
$('#emojiWrapper').append(
'<img src="/emoji/'+i+'.gif">'
)
}
}
選擇表情之后，獲取該表情的下標(biāo)，并在textarea里面顯示為[emoji:下標(biāo)]的形式，在
數(shù)據(jù)庫里面以字符串[emoji:下標(biāo)]的形式儲(chǔ)存
$("#emojiWrapper img").click(function () {
src=$(this).attr("src");
msg=$("#messageInput").val();
$("#messageInput").val(msg+"[emoji:"+src.slice(7,-4)+"]");
});
點(diǎn)擊發(fā)送后與之前的發(fā)送消息一樣
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;
//用正則表達(dá)式來判斷這條消息里面有沒有表情的信息,有的話就替換成<img>的形式，將表情顯示出來
while(match = reg.exec(msg)){
emojiIndex=match[0].slice(7,-1);
result=result.replace(match[0], '<img src="/emoji/'+emojiIndex+'.gif">');
}
return result;
}
發(fā)送本地的圖片給好友
使用base64實(shí)現(xiàn)socket.io傳輸圖片和聲音文件
利用FileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型厨剪。
瀏覽器端的代碼使用readAsDataURL()得到base64 encoded string
readAsDataURL：該方法將文件讀取為一段以 data: 開頭的字符串哄酝，這段字符串的實(shí)質(zhì)就是 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 觸發(fā)上傳事件后
$('body').on('change','#image',doSendImage);
//發(fā)送圖片
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 服務(wù)器端的代碼與一般的文本信息發(fā)送無異：
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{
// 如果不在線的話，狀態(tài)為0
status = 0;
}
var data={
userId: uid,
from: uid,
to: fid,
status: status,
content: img
}
//將圖片轉(zhuǎn)換成的編碼作為消息存到數(shù)據(jù)庫中去
dbHelper.addMsg(data,function (success,doc) {
console.log("right");
});
});
截圖之后ctrl+v發(fā)送
原理和發(fā)送本地圖片一樣钾唬，同樣是轉(zhuǎn)為base64編碼万哪，就是一開始要觸發(fā)paste事件，并獲得paste之后的值
chat.js添加paste事件
$('body').on('paste','#messageInput',doPaste);
//ctrl+v粘貼之后發(fā)送圖片
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);
}
}
}
由于初始化歷史消息的時(shí)候抡秆，要區(qū)分base64編碼和文字信息
更改初始化消息事件
//選擇好友聊天時(shí)奕巍，初始化與好友的聊天記錄
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;
參考網(wǎng)址:http://stackoverflow.com/questions/2787669/get-html-from-clipboard-in-javascript
