前言
公司业务需要，PC端，移动端都用到了第三方 网易云信 IM 来实现在线客服咨询。
在这当中难免遇到一些需求是网易云信没有提供，需要自行编码进行扩展的。写此篇文章的目的正是因业务需要，需要在网易云信的基础上进行消息类型的扩展。
此篇文章里的代码是基于 网易云信 NIM_Web_Demo_H5 进行修改的
如下图所示的消息类型
带图片和文字，并且可点击的消息类型
标题是H5移动版，可想而知，肯定还有其他如 iOS版，Android版等，不可能此类型的消息（我称它为图文消息）只支持Web，而在iOS或Android端无法显示问题。以下附上其他版本扩展的链接，H5移动版和 Web版 很相似，因为都是使用同一个sdk）
正文
- 将github上的工程
git clone或者下载到本地
node环境工程部署，将工程克隆到本地，使用静态服务启动本工程。
npm installnpm run server- 在浏览器中访问
http://127.0.0.1:2001
- 运行没有问题后，修改文件配置 config.js 中的
appKey，将demo修改为自己所用。
//...
let appConfig = {
// 用户的appkey
// 用于在web demo中注册账号异步请求demo 服务器中使用
test: {
appkey: '填入自己的appkey',
postUrl: 'https://apptest.netease.im'
},
online: {
appkey: '填入自己的appkey',
postUrl: 'https://app.netease.im'
}
};
//...
- 添加触发自定义消息发送功能，主要用于我们开发调试。
这个功能主要用于我们给网站用户发送促销或活动等使用，图文链接消息的发送功能不开放给用户。下图给出示例图，当用户点击咨询时，我们自动给他回复一条图文链接消息。
用户点击首页上的咨询时，自动发送一条图文链接消息
编辑 ChatEditor.vue，在sendTextMsg函数中添加如下代码，正式上线后，此处应该注释掉。
if (/^\s*$/.test(this.msgToSent)) {
this.$vux.alert.show({
title: '请不要刷屏'
});
return;
// 添加以下代码是用来开发调试发送自定义的消息类型，当发送 custom 给对方时进入该逻辑
} else if (this.msgToSent == 'custom') {
let content = {
type: 5, // 自定义消息类型为5，此处的消息类型必须和其他平台的图文消息类型一致
data: {
title: '暖冬季欢乐送', // 消息标题
describe: '家具满1000元减100元再返100元现金券！点击查看详情！', // 消息描述
link_url: 'https://www.jianshu.com/p/dadd344b6413', // 点击跳转的URL
image_url: 'https://netease.im/res/image/download/section1.png?v=002' // 消息中的图片地址
}
};
this.$store.dispatch('sendMsg', {
type: 'custom',
scene: this.scene,
to: this.to,
pushContent: this.pushContent,
content: content
});
return;
} else if (this.msgToSent.length > 800) {
//...
}
如上操作完成后，重新 npm run start，然后尝试发送 custom 给对方时显示如下。
输入框输入 custom 点击发送按钮， 触发上面的条件
显示[自定义消息]，这个不是我们所期待的，所以接下在添加代码使其显示正常
- 自定义消息的显示
自定义消息类型的显示在 ChatItem.vue 的beforeMount函数中处理，添加如下代码
// 此处省略前面代码
} else if (content.type === 3) {
// ......
// type 5 为图文链接消息
} else if (content.type === 5) {
let obj = content.data;
item.showText = `<a class="imgtxt" href=${obj.link_url} target="_blank">`;
item.showText += `<div class="imgtxt-title">${obj.title}</div>`;
if (obj.image_url && obj.image_url.trim() != '') {
item.showText += `<img class="imgtxt-img" src=${obj.image_url} />`;
}
if (obj.describe && obj.describe.trim() != '') {
item.showText += `<div class="imgtxt-describe">${obj.describe}</div>`;
}
item.showText += `</a>`;
} else {
item.showText = util.parseCustomMsg(item);
if (item.showText !== '[自定义消息]') {
item.showText += ',请到手机或电脑客户端查看';
}
} else if (item.type === 'image') {
//...
}
上面添加后，还需在 unit.css 中 .u-msg 里添加对应的样式属性，代码如下
.button {
margin: 0.1rem 0;
padding: 0.1rem 0.2rem;
border: 1px solid #fff;
border-radius: 0.2rem;
background-color: $color_nav_active_background;
color: #666;
}
// 从这开始
.imgtxt {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
.imgtxt-title {
color: #333;
line-height: 24px;
font-size: 14px;
font-weight: bold;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-moz-line-clamp: 1;
-webkit-line-clamp: 1;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
padding: 5px 15px;
}
.imgtxt-img {
border-top: 1px #e6e6e6 solid;
border-bottom: 1px #e6e6e6 solid;
margin: 0 15px;
max-width: 100% !important;
max-height: 160px !important;
vertical-align: bottom;
}
.imgtxt-describe {
color: #666;
font-size: 12px;
text-align: left;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-moz-line-clamp: 3;
-webkit-line-clamp: 3;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
padding: 5px 15px;
}
}
以上操作完成后，重新运行 npm run start，然后测试。
注释上面ChatEditor.vue中的content对象中的 image_url, describe 可以测试发送如上消息
尾篇
到此，云信H5移动端的扩展自定义消息已经完成。当然，这只是Web H5的显示正常了，其他如Android，iOS，pc等客户端收到此类的消息，显示有问题，也是需要扩展调整的。此篇文章其他端的文章我会陆续更新，如果有需要的同学可以关注下。
以下附上其他版本扩展的链接
