====== 消息 ======
 
===== 发送消息 =====

==== 发送文本消息（单聊） ====

单聊发送文本消息示例如下。

<code javascript>
// 单聊发送文本消息
var sendPrivateText = function () {
    var id = conn.getUniqueId();                 // 生成本地消息id
    var msg = new WebIM.message('txt', id);      // 创建文本消息
    msg.set({
        msg: 'message content',                  // 消息内容
        to: 'username',                          // 接收消息对象（用户id）
        roomType: false,
        success: function (id, serverMsgId) {
            console.log('send private text Success');
        }
    });
    msg.body.chatType = 'singleChat';
    conn.send(msg.body);
};
</code>

==== 发送文本消息（群组） ====

<code javascript>
// 群组发送文本消息
var sendGroupText = function () {
    var id = conn.getUniqueId();            // 生成本地消息id
    var msg = new WebIM.message('txt', id); // 创建文本消息
    var option = {
        msg: 'message content',             // 消息内容
        to: 'group id',                     // 接收消息对象(群组id)
        roomType: false,
        chatType: 'chatRoom',
        success: function () {
            console.log('send room text success');
        },
        fail: function () {
            console.log('failed');
        }
    };
    msg.set(option);
    msg.setGroup('groupchat');
    conn.send(msg.body);
};
</code>

==== 发送文本消息（聊天室） ====

<code javascript>
// 聊天室发送文本消息
var sendRoomText = function () {
    var id = conn.getUniqueId();         // 生成本地消息id
    var msg = new WebIM.message('txt', id); // 创建文本消息
    var option = {
        msg: 'message content',          // 消息内容
        to: 'chatroom id',               // 接收消息对象(聊天室id)
        roomType: true,
        chatType: 'chatRoom',
        success: function () {
            console.log('send room text success');
        },
        fail: function () {
            console.log('failed');
        }
    };
    msg.set(option);
    msg.setGroup('groupchat');
    conn.send(msg.body);
};
</code>

==== 发送表情消息 ====

发送表情同发送文本消息。需要在对方客户端将表情文本进行解析成图片，见[[start:400webimintegration:30singlechat#处理消息|处理消息]]。

==== 发送贴图消息 ====

Web IM SDK本身不支持截图，使用下述代码可以实现用户粘贴图片至输入框后发送。示例代码为单聊，贴图发送至群组和聊天室时需参考“发送文本消息”修改roomType和chatType参数。

<code javascript>
// 单聊贴图发送
document.addEventListener('paste', function (e) {
    if (e.clipboardData && e.clipboardData.types) {
        if (e.clipboardData.items.length > 0) {
            if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
                var blob = e.clipboardData.items[0].getAsFile();
                var url = window.URL.createObjectURL(blob);
                var id = conn.getUniqueId();             // 生成本地消息id
                var msg = new WebIM.message('img', id);  // 创建图片消息
                msg.set({
                    apiUrl: WebIM.config.apiURL,
                    file: {data: blob, url: url},
                    to: 'username',                      // 接收消息对象
                    roomType: false,
                    chatType: 'singleChat',
                    onFileUploadError: function (error) {
                        console.log('Error');
                    },
                    onFileUploadComplete: function (data) {
                        console.log('Complete');
                    },
                    success: function (id) {
                        console.log('Success');
                    }
                });
                conn.send(msg.body);
            }
        }
    }
});
</code>

==== 发送命令消息 ====

<code javascript>
var id = conn.getUniqueId();            //生成本地消息id
var msg = new WebIM.message('cmd', id); //创建命令消息

msg.set({
  msg: 'msg',
  to: 'username',                       //接收消息对象
  action : 'action'                     //用户自定义，cmd消息必填
  ext :{'extmsg':'extends messages'}    //用户自扩展的消息内容（群聊用法相同）
  success: function ( id，serverMsgId ) {}//消息发送成功回调   
}); 

if ( /*如果是发送到群组*/ ) { 
  msg.setGroup('groupchat');
} else if ( /*如果是发送到聊天室*/ ) {
  msg.body.roomType = true;
  msg.setGroup('groupchat');
}   

conn.send(msg.body);
</code>

==== 发送附件消息 ====

发送附件消息，SDK自动分两步完成：

  - 上传附件到服务器，并得到服务返回的附件信息等；
  - 发送附件消息，消息体包含附件的基本信息、服务器路径、secret 等。

单聊发送图片/文件/音频/视频消息示例如下（关于在群组和聊天室发送这类消息，请参考“发送文本消息”修改roomType和chatType）：

<code javascript>
// 单聊发送图片消息
var sendPrivateImg = function () {
    var id = conn.getUniqueId();                   // 生成本地消息id
    var msg = new WebIM.message('img', id);        // 创建图片消息
    var input = document.getElementById('image');  // 选择图片的input
    var file = WebIM.utils.getFileUrl(input);      // 将图片转化为二进制文件
    var allowType = {
        'jpg': true,
        'gif': true,
        'png': true,
        'bmp': true
    };
    if (file.filetype.toLowerCase() in allowType) {
        var option = {
            apiUrl: WebIM.config.apiURL,
            file: file,
            to: 'username',                       // 接收消息对象
            roomType: false,
            chatType: 'singleChat',
            onFileUploadError: function () {      // 消息上传失败
                console.log('onFileUploadError');
            },
            onFileUploadComplete: function () {   // 消息上传成功
                console.log('onFileUploadComplete');
            },
            success: function () {                // 消息发送成功
                console.log('Success');
            },
            flashUpload: WebIM.flashUpload
        };
        msg.set(option);
        conn.send(msg.body);
    }
};
</code>

<code javascript>
// 单聊发送文件消息
var sendPrivateFile = function () {
    var id = conn.getUniqueId();                   // 生成本地消息id
    var msg = new WebIM.message('file', id);        // 创建文件消息
    var input = document.getElementById('file');  // 选择文件的input
    var file = WebIM.utils.getFileUrl(input);      // 将文件转化为二进制文件
    var allowType = {
        'jpg': true,
        'gif': true,
        'png': true,
        'bmp': true,
        'zip': true,
        'txt': true,
        'doc'：true,
        'pdf': true
    };
    if (file.filetype.toLowerCase() in allowType) {
        var option = {
            apiUrl: WebIM.config.apiURL,
            file: file,
            to: 'username',                       // 接收消息对象
            roomType: false,
            chatType: 'singleChat',
            onFileUploadError: function () {      // 消息上传失败
                console.log('onFileUploadError');
            },
            onFileUploadComplete: function () {   // 消息上传成功
                console.log('onFileUploadComplete');
            },
            success: function () {                // 消息发送成功
                console.log('Success');
            },
            flashUpload: WebIM.flashUpload
        };
        msg.set(option);
        conn.send(msg.body);
    }
};
</code>

<code javascript>
// 单聊发送音频消息
var sendPrivateAudio = function () {
    var id = conn.getUniqueId();                   // 生成本地消息id
    var msg = new WebIM.message('audio', id);      // 创建音频消息
    var input = document.getElementById('audio');  // 选择音频的input
    var file = WebIM.utils.getFileUrl(input);      // 将音频转化为二进制文件
    var allowType = {
        'mp3': true,
        'amr': true,
        'wmv': true
    };
    if (file.filetype.toLowerCase() in allowType) {
        var option = {
            apiUrl: WebIM.config.apiURL,
            file: file,
            to: 'username',                       // 接收消息对象
            roomType: false,
            chatType: 'singleChat',
            onFileUploadError: function () {      // 消息上传失败
                console.log('onFileUploadError');
            },
            onFileUploadComplete: function () {   // 消息上传成功
                console.log('onFileUploadComplete');
            },
            success: function () {                // 消息发送成功
                console.log('Success');
            },
            flashUpload: WebIM.flashUpload
        };
        msg.set(option);
        conn.send(msg.body);
    }
};
</code>

<code javascript>
// 单聊发送视频消息
var sendPrivateVideo = function () {
    var id = conn.getUniqueId();                   // 生成本地消息id
    var msg = new WebIM.message('video', id);      // 创建视频消息
    var input = document.getElementById('video');  // 选择视频的input
    var file = WebIM.utils.getFileUrl(input);      // 将视频转化为二进制文件
    var allowType = {
        'mp4': true,
        'wmv': true,
        'avi': true,
        'rmvb':true,
        'mkv':true
    };
    if (file.filetype.toLowerCase() in allowType) {
        var option = {
            apiUrl: WebIM.config.apiURL,
            file: file,
            to: 'username',                       // 接收消息对象
            roomType: false,
            chatType: 'singleChat',
            onFileUploadError: function () {      // 消息上传失败
                console.log('onFileUploadError');
            },
            onFileUploadComplete: function () {   // 消息上传成功
                console.log('onFileUploadComplete');
            },
            success: function () {                // 消息发送成功
                console.log('Success');
            },
            flashUpload: WebIM.flashUpload
        };
        msg.set(option);
        conn.send(msg.body);
    }
};
</code>
===== 接收消息 =====

见[[start:400webimintegration:25intiate#添加回调函数|添加回调函数]]。

===== 处理消息 =====

conn.listen() 中注册不同消息接收 handler 之后，可自行解析消息体，定位聊天好友，并追加到与其聊天窗口。具体参考 http://webim.easemob.com 效果。

注：对于图片、语音消息需要先进行下载，然后进行显示或者播放处理。

收到表情消息的处理示例：

<code javascript>
conn.listen({
    onEmojiMessage: function (message) {
        // 当为WebIM添加了Emoji属性后，若发送的消息含WebIM.Emoji里特定的字符串，connection就会自动将
        // 这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为{type: 'emoji(或者txt)', data:''}
        // 当type='emoji'时，data表示表情图像的路径，当type='txt'时，data表示文本消息
        console.log('Emoji');
        var data = message.data;
        for(var i = 0 , l = data.length ; i < l ; i++){
            console.log(data[i]);
        }
    },   //收到表情消息
});
</code>

收到图片消息的处理示例：

<code javascript>
conn.listen({
    onPictureMessage: function (message) {
        console.log("Location of Picture is ", message.url);
    }, //收到图片消息
});
</code>

收到音频消息的处理示例：

<code javascript>
conn.listen({
  onAudioMessage: function ( message ) {
    var options = { url: message.url };
    
    options.onFileDownloadComplete = function ( response ) { 
      //音频下载成功
    };  

    options.onFileDownloadError = function () {
      //音频下载失败 
    };  

    //通知服务器将音频转为mp3
    options.headers = { 
      'Accept': 'audio/mp3'
    };

    WebIM.utils.download.call(conn, options);
  }
})
</code>
===== 历史消息 =====

SDK暂不具有缓存历史消息功能，Demo 中聊天窗口只能显示，当前登录后会话实时在聊天信息，不能查看历史消息，可以对登录后的聊天信息进行清除操作。

===== 新消息提示 =====

SDK在收到新消息时会直接转发给登录用户，接收到消息后，Demo 中会在好友或者群组的后面显示红色消息数，具体样式开发者可自行处理。

----
<WRAP group>
<WRAP half column>
上一页：[[start:400webimintegration:25intiate|Web SDK基础功能]]
</WRAP>

<WRAP half column>
下一页：[[start:400webimintegration:contact management|好友管理]]
</WRAP>
</WRAP>