网易云信IM（H5移动端SDK）使用
2018-12-29 本文已影响0人
il_xin
QQ截图20181229085012.png
最近体验了下云信SDK
直接上干货，不废话！
下载地址：
SDK:https://netease.im/im-sdk-demo
Demo：https://github.com/netease-im/NIM_Web_Demo_H5
入手指南：https://dwz.cn/Hq6Biq2O
服务端Api：https://dwz.cn/F3Xpc1aR
私聊上传：http://nos.netease.com/vod163/upload.js
表情：http://www.jq22.com/jquery-info16078
本篇内容为：云信Sdk+jquery.emoticons实现聊天功能
应用在web移动端，用户间会话沟通和客服等功能。
PS:本篇提供基础实现方法，不提供界面ui，用哪个表情插件都可以，比如大笑的表情对应[大笑]，转义后从json找到对应url。
一.获取自己的appKey，具体方法云信官方有。
注册云信帐号——>登录网易云信管理后台——>创建应用——>获取appkey
二.引入SDK，demo分离太麻烦，此处并未使用
<script type="text/javascript" src="/js/im/NIM_Web_SDK_v5.9.1.js"></script>
需要注意的是：在本机静态页面测试时容易报错，需要发布项目，使用127.0.0.1:XX或者localhost等都可以过关;在使用fis3等优化时，如果进入页面sdk报错，将sdk单独处理不要fis等。
三.初始化参数
会话列表页常用：
var nim = SDK.NIM.getInstance({
// 初始化SDK
appKey: 'xxx',
account: 'xxx',
token: 'xxx',
customTag: 'tag',
onconnect: onConnect,
onerror: onError,
onwillreconnect: onWillReconnect,
ondisconnect: onDisconnect,
// 多端
onloginportschange: onLoginPortsChange,
// 会话
onsessions: onSessions,
onupdatesession: onUpdateSession,
// 同步完成
onsyncdone: onSyncDone
});
//此处隐藏onConnect，onError等方法
//请复制官方初始化代码，然后修改加入以下
function onSessions(sessions) {
console.log('收到会话列表', sessions);
data.sessions = nim.mergeSessions(data.sessions, sessions);
updateSessionsUI(sessions);
}
function onUpdateSession(session) {
console.log('会话更新了', session);
data.sessions = nim.mergeSessions(data.sessions, session);
//对html进行局部更新，和grid操作类似
updatePartUI(session);
}
四.会话列表展现
function updateSessionsUI(sessions){
//这里取当天时间，后面会用在列表会话时间上，例如：12-20(今日之前)和9:35(当日)
var today = new Date(new Date().setHours(0, 0, 0, 0)) / 1;
//...你的时间处理,可使用下方的timestampToTime()
//你的页面更新操作
var html = ""
for (var i = 0 ; i < sessions.length; i++) {
//...
html+="...";
}
$('#').append(html);
}
function updatePartUI(session){
//根据列表html结构更新和排序
}
//时间戳处理
function timestampToTime(timestamp) {
var times = new Date(parseInt(timestamp));
var t = times.toLocaleDateString().replace(/\//g, "-").substr(5,9)+ " " + times.toTimeString().substr(0,5);
return t;
}
//私聊
$(document).on("click",'#nim_container table',function(){
//需要提供account和token来进行双方会话
//在sessions会话列表里都是有的
var im_account ="";
var im_token = "";
var url="../index?account_id="+im_account+"&token_id="+im_token;
window.location.href=url;
});
五.私聊、表情、图片上传的实现
//加载云信SDK
//获取会话对象
var nimParam = getUrlParam();
var data = {};
var nim = SDK.NIM.getInstance({
// 初始化SDK
appKey: 'xxxxxx',
account: nimParam.account_id,
token: nimParam.token_id,
customTag: 'tag',
onconnect: onConnect,
onerror: onError,
onwillreconnect: onWillReconnect,
ondisconnect: onDisconnect,
// 多端
onloginportschange: onLoginPortsChange,
// 消息
onmsg: onMsg,
// 同步完成
onsyncdone: onSyncDone
});
//...没什么用的我就不写了，自己加自己要的
function onMsg(msg) {
console.log('收到消息', msg.scene, msg.type, msg);
pushMsg(msg);
}
//同步完成后获取历史信息
function onSyncDone() {
nim.getHistoryMsgs({
scene: 'p2p',
to: nimParam.nim_fromId,
done: getHistoryMsgsDone
});
}
function getHistoryMsgsDone(error, obj) {
if (!error) {
console.log(obj.msgs);
pushMsg(obj.msgs);
}
}
//输出聊天信息，表情转义
function pushMsg(msgs) {
if (!Array.isArray(msgs)) { msgs = [msgs]; }
if (msgs[0]!=null) {
var sessionId = msgs[0].sessionId;
data.msgs = data.msgs || {};
data.msgs[sessionId] = nim.mergeMsgs(data.msgs[sessionId], msgs);
var emoticonPath = '/img/im/';
var msgHtml , title , emoticonUrl , shwoType ,msgsText;
var filter = /[\[\]]/g;
for (var i = msgs.length - 1; i >= 0; i--) {
//输出内容
if (msgs[i].type=="text"){
msgsText = msgs[i].text;
//表情字符转义
var msgsList = msgsText.match(/\[[\u4e00-\u9fa5]*\w*\]/g);
if(msgsList){
for(var e=0;e<msgsList.length;e++){
title = msgsList[e].replace(filter,'');
//获取表情路径
for (var p = 0; p < emoticonsList.length; p++) {
if (emoticonsList[p].title==title) {
emoticonUrl = emoticonsList[p].url;
break;
}
}
//错误格式默认表情笑容
if (emoticonUrl == undefined) {
emoticonUrl = emoticonsList[0].url;
}
msgsText = msgsText.replace(msgsList[e],'<img src="'+emoticonPath+"emoticons/"+emoticonUrl+'"/> ');
}
}
}else if (msgs[i].type=="image"){
msgsText = '<img src="'+msgs[i].file.url+'"/>';
}
//以下是你的html结构
//你的对话框样式
if (msgs[i].flow=="out") {
shwoType = "";
}else{
//..
}
msgHtml="<div class='"+shwoType+"'><div class='msg'><div class='portrait'>"
+"<img src='"+emoticonPath+"touxiang.png' alt=''/></div>"
+"<div class='msg_content'>"+msgsText+"</div></div></div>";
upView(msgHtml);
}
anchor();
}
}
//发送信息成功后更新
function sendMsgDone(error, msg) {
console.log('发送' + msg.scene + ' ' + msg.type + '消息' + (!error?'成功':'失败') + ', id=' + msg.idClient);
pushMsg(msg);
}
//回车和发送按钮操作
$('#dialogue').bind('keypress', function (event) {
if (event.keyCode == "13") {
sendMsgs();
}
});
$('.im_send').click(function(){
sendMsgs();
});
//发送文本信息
function sendMsgs(){
var dialogue = document.getElementById("dialogue");
if($.trim(dialogue.value).length != 0){
var msg = nim.sendText({
scene: 'p2p',
to: nimParam.nim_fromId,
text: dialogue.value,
done: sendMsgDone
});
dialogue.value = "";
}
}
//发送图片,具体参数请查看官方API
//此处需要upload.js、md5.js(页首有下载链接)
function sendFile(curFile){
nim.sendFile({
scene: 'p2p',
to: nimParam.nim_fromId,
type: 'image',
fileInput: curFile,
fastPass: '{"w":200,"h":110,"md5":"xxxxxxxxx"}',
beginupload: function(upload) {
// - 如果开发者传入 fileInput, 在此回调之前不能修改 fileInput
// - 在此回调之后可以取消图片上传, 此回调会接收一个参数 `upload`, 调用 `upload.abort();` 来取消文件上传
},
uploadprogress: function(obj) {
// console.log('文件总大小: ' + obj.total + 'bytes');
// console.log('已经上传的大小: ' + obj.loaded + 'bytes');
// console.log('上传进度: ' + obj.percentage);
// console.log('上传进度文本: ' + obj.percentageText);
},
uploaddone: function(error, file) {
// console.log(error);
// console.log(file);
console.log('上传' + (!error?'成功':'失败'));
},
beforesend: function(msg) {
// console.log('正在发送p2p image消息, id=' + msg.idClient);
},
done: sendMsgDone
});
}
/*更新视图*/
function upView(html){
$('#js-nim_msg').append(html);
}
//页末锚点
function anchor(){
$('body,html').animate({scrollTop: $('.msg_content:last').offset().top});
}
//获取nim_url参数
function getUrlParam(name) {
var search=location.search;
var params={};
if(search!=""){
search.slice(1).split("&").forEach(function(val){
var arr=val.split("=");
params[arr[0]]=arr[1];
});
}
return params; //返回params
}
//表情页展现
$('.nim_expression').click(function(){
resetmode();
if($('#js-nim_emoticon').is(':hidden')){
$('#js-nim_emoticon').show(200);
$('#js-nim_footer').css('bottom','2.2rem');
$('#nim_anchor').height('2.2rem');
}
anchor();
});
//添加文件
$('#nim_more').click(function(){
//fileInput为type='file'的文本框，点击按钮图片时单击文本框，上传的文件必须储存在file内。
$("#fileInput").click();
});
//重置表情、更多内容等都写在这个位置
function resetmode(){
$('#js-nim_more').hide(200);
$('#js-nim_emoticon').hide(200);
$('#nim_anchor').height(0);
$('#js-nim_footer').css('bottom','0rem');
}
//载入表情
$.emoticons({
'activeCls':'trigger-active'
});
//选择表情后转义添加到文本
$('#im_emoticons img').click(function(){
var format = "["+$(this).attr("title")+"]";
var dialogue = document.getElementById("dialogue");
dialogue.value = dialogue.value + format;
});
/**
* 加载表情，位置自己放
*/
;(function (factory) {
if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
// AMD或CMD
define([ "jquery" ],factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = function( root, jQuery ) {
if ( jQuery === undefined ) {
if ( typeof window !== 'undefined' ) {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
//Browser globals
factory(jQuery);
}
}(function ($) {
$.emoticons = function(parameter,getApi) {
if(typeof parameter == 'function'){ //重载
getApi = parameter;
parameter = {};
}else{
parameter = parameter || {};
getApi = getApi||function(){};
}
var defaults = {
'prefix':'widget',
'publisherCls':'publisher',
'triggerCls':'trigger',
'activeCls':'active',
'path':'/img/im/emoticons/',
'list':emoticonsList,
'top':0,
'left':0
};
var options = $.extend({}, defaults, parameter);
var _api = {};
var $document = $(document);
var $emoticon = $('#im_emoticons');
var _hash = {};
$.each(options.list,function(index,item){
_hash[item.title] = options.path+item.url;
$emoticon.append('<img title="'+item.title+'" src="'+_hash[item.title]+'"/>');
});
//初始化
getApi(_api);
return this;
};
}));
var emoticonsList = [{title:'微笑',url:'weixiao.gif'},{title:'嘻嘻',url:'xixi.gif'},{title:'哈哈',url:'haha.gif'},{title:'可爱',url:'keai.gif'},{title:'可怜',url:'kelian.gif'},{title:'挖鼻',url:'wabi.gif'},{title:'吃惊',url:'chijing.gif'},{title:'害羞',url:'haixiu.gif'},{title:'挤眼',url:'jiyan.gif'},{title:'闭嘴',url:'bizui.gif'},{title:'鄙视',url:'bishi.gif'},{title:'爱你',url:'aini.gif'},{title:'泪',url:'lei.gif'},{title:'偷笑',url:'touxiao.gif'},{title:'亲亲',url:'qinqin.gif'},{title:'生病',url:'shengbing.gif'},{title:'太开心',url:'taikaixin.gif'},{title:'白眼',url:'baiyan.gif'},{title:'右哼哼',url:'youhengheng.gif'},{title:'左哼哼',url:'zuohengheng.gif'},{title:'嘘',url:'xu.gif'},{title:'衰',url:'shuai.gif'},{title:'吐',url:'tu.gif'},{title:'哈欠',url:'haqian.gif'},{title:'抱抱',url:'baobao.gif'},{title:'怒',url:'nu.gif'},{title:'疑问',url:'yiwen.gif'},{title:'馋嘴',url:'chanzui.gif'},{title:'拜拜',url:'baibai.gif'},{title:'思考',url:'sikao.gif'},{title:'汗',url:'han.gif'},{title:'困',url:'kun.gif'},{title:'睡',url:'shui.gif'},{title:'钱',url:'qian.gif'},{title:'失望',url:'shiwang.gif'},{title:'酷',url:'ku.gif'},{title:'色',url:'se.gif'},{title:'哼',url:'heng.gif'},{title:'鼓掌',url:'guzhang.gif'},{title:'晕',url:'yun.gif'},{title:'悲伤',url:'beishang.gif'},{title:'抓狂',url:'zhuakuang.gif'},{title:'黑线',url:'heixian.gif'},{title:'阴险',url:'yinxian.gif'},{title:'怒骂',url:'numa.gif'},{title:'互粉',url:'hufen.gif'},{title:'书呆子',url:'shudaizi.gif'},{title:'愤怒',url:'fennu.gif'},{title:'感冒',url:'ganmao.gif'},{title:'心',url:'xin.gif'},{title:'伤心',url:'shangxin.gif'},{title:'猪',url:'zhu.gif'},{title:'熊猫',url:'xiongmao.gif'},{title:'兔子',url:'tuzi.gif'},{title:'OK',url:'ok.gif'},{title:'耶',url:'ye.gif'},{title:'GOOD',url:'good.gif'},{title:'NO',url:'no.gif'},{title:'赞',url:'zan.gif'},{title:'来',url:'lai.gif'},{title:'弱',url:'ruo.gif'},{title:'草泥马',url:'caonima.gif'},{title:'神马',url:'shenma.gif'},{title:'囧',url:'jiong.gif'},{title:'浮云',url:'fuyun.gif'},{title:'给力',url:'geili.gif'},{title:'围观',url:'weiguan.gif'},{title:'威武',url:'weiwu.gif'},{title:'话筒',url:'huatong.gif'},{title:'蜡烛',url:'lazhu.gif'},{title:'蛋糕',url:'dangao.gif'},{title:'发红包',url:'fahongbao.gif'}];
六.备注
upload.js需要使用自己的AppKey
fileExts: ['JPG','PNG','JPGE','GIF']
...后续再加，今天先到这里
