网易云信-新增自定义消息（Web版）

前言

公司业务需要，PC端，移动端都用到了第三方 网易云信 IM 来实现在线客服咨询。
在这当中难免遇到一些需求是网易云信没有提供，需要自行编码进行扩展的。写此篇文章的目的正是因业务需要，需要在网易云信的基础上进行消息类型的扩展。

此篇文章里的代码是基于 网易云信 NIM_Web_Demo 进行修改的

如下图所示的消息类型

带图片和文字，并且可点击的消息类型

标题是Web版，可想而知，肯定还有其他如 iOS版，Android版等，不可能此类型的消息（我称它为图文消息）只支持web，而在iOS或Android端无法显示问题。以下附上其他版本扩展的链接，Web版 和 H5移动版很相似，因为都是使用同一个sdk）

• 网易云信-新增自定义消息（Android版）

正文

1. 按照GitHub里的步骤

node环境工程部署，将工程克隆到本地，使用静态服务启动本工程。

1. npm install
2. node app
3. 在浏览器中访问
   http://127.0.0.1:8182/webdemo/index.html

2. 运行没有问题后，修改文件配置 config.js 中的 appKey ，将demo修改为自己所用。

(function() {
    // 配置
    var envir = 'online';
    var configMap = {
        dev: {
            appkey: '填入自己的appKey',
            url: 'https://apptest.netease.im'
        },
        test: {
            appkey: '填入自己的appKey',
            url: 'https://apptest.netease.im'
        },
        pre: {
            appkey: '填入自己的appKey',
            url: 'http://preapp.netease.im:8184'
        },
        online: {
            appkey: '填入自己的appKey',
            url: 'https://app.netease.im'
        }
    };
    window.CONFIG = configMap[envir];
    // 是否开启订阅服务
    window.CONFIG.openSubscription = true;
})();

3. 添加触发自定义消息发送功能，主要用于我们开发调试。

这个功能主要用于我们给网站用户发送促销或活动等使用，图文链接消息的发送功能不开放给用户。下图给出示例图，当用户点击咨询时，我们自动给他回复一条图文链接消息。

用户点击网站上的咨询时，自动发送一条图文链接消息

此处有些读者可能会想，这有什么难的，不就是个网页嘛。后台自动回复消息时发送一段如下的html代码，然后设置下样式排版一下就行了。

   
头部标题
   
   
底部描述

这样一来就有个问题，消息显示面板支持发送html代码了。其他懂行行家要是发送如下的代码就惨了。

发送一段无限循环javascript脚本

应该没人会这么傻吧，自己坑害自己。当然我们使用js的 escape 和 unescape 在消息的收发的时候转化下就好了。
但是此时我们要是在app里看这个消息

因为消息是同步的，所以在其他端也能看到消息

看到的却是网页代码，要是在PC客户端看这条消息肯定也是这样。当然我们可以针对不平终端使用正则或者模版匹配然后使其显示成我们想要的样子，如此一来，又有个问题，消息推送内容的显示。如下图

因为发送的是一段普通文本类型消息，所以会显示消息内容

还有其它问题我就不一一列出了，你会发现自己在这条不归路上越陷越深，做各种兼容，哪天产品需求一变你就痛苦去吧。（我为什么花一个篇幅来说这个问题。1.这种解决问题的方式是在给自己挖坑。2.作为一个开发工程师第一时间应该想到的是扩展。3.我们目前就是这种做法，我看着是着实的难受。）

编辑 message.js，在sendTextMessage函数中添加如下代码，正式上线后，此处应该注释掉。

点击我传送

// 添加此处代码是用来开发调试发送自定义的消息类型，当发送 custom 给对方时进入该逻辑
if (text.length > 0 && text == 'custom') {
    // 此处不可能是写死的，应该是后台可配置的，发送的数据结构如下
    var 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.mysdk.sendCustomMessage(scene, to, content, this.sendMsgDone.bind(this));
    return;
}

如上操作完成后，尝试发送 custom 给对方时显示如下。

输入框输入 custom 触发上面的条件

4. 自定义消息的显示
   自定义消息类型的显示在 util.js 的 getMessage 函数中处理，添加如下代码

点我传送

case 'custom':
    var content = JSON.parse(msg.content);
    if (content.type === 1) {
        str = sentStr + '一条[猜拳]消息,请到手机或电脑客户端查看';
    } else if (content.type === 2) {
        str = sentStr + '一条[阅后即焚]消息,请到手机或电脑客户端查看';
    } else if (content.type === 3) {
        var catalog = _$escape(content.data.catalog),
            chartvar = _$escape(content.data.chartlet);
        str = '';
    } else if (content.type == 4) {
        str = msg.fromNick + '发起了[白板互动]';
    } else if (content.type == 5) {
        // 添加消息类型为 5，显示图文消息内容
        var obj = content.data;
        str = ``;
        str += `
${obj.title}
`;
        if (obj.image_url && obj.image_url.trim() != '') {
            str += ``;
        }
        if (obj.describe && obj.describe.trim() != '') {
            str += `
${obj.describe}
`;
        }
        str += ``;
    } else {
        str = sentStr + '一条[自定义]消息，请到手机或电脑客户端查看';
    }
break;

上面添加后，还需在 main.js 中添加对应的 html class 属性，代码如下

点我传送

.msg .cnt .imgtxt {
    width: 300px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px;
}
.msg .cnt .imgtxt .imgtxt-title {
    color: #1865b1;
    line-height: 24px;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}
.msg .cnt .imgtxt .imgtxt-img {
    max-height: 160px !important;
    margin: 10px 0;
    border-top: 1px #e6e6e6 solid;
    border-bottom: 1px #e6e6e6 solid;
    padding: 10px 0;
}
.msg .cnt .imgtxt .imgtxt-describe {
    color: #1865b1;
    font-size: 12px;
    text-align: left;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}

尾篇

到此，云信Web端的扩展自定义消息已经完成。当然，这只是Web的显示正常了，其他如Android，iOS，pc等客户端收到此类的消息，显示有问题，也是需要扩展调整的。此篇文章其他端的文章我会陆续更新，如果有需要的同学可以关注下。

以下附上其他版本扩展的链接

• 网易云信-新增自定义消息（Android版）