前言

公司業(yè)務(wù)需要，PC端，移動(dòng)端都用到了第三方 網(wǎng)易云信 IM 來(lái)實(shí)現(xiàn)在線客服咨詢(xún)。
在這當(dāng)中難免遇到一些需求是網(wǎng)易云信沒(méi)有提供，需要自行編碼進(jìn)行擴(kuò)展的。寫(xiě)此篇文章的目的正是因業(yè)務(wù)需要，需要在網(wǎng)易云信的基礎(chǔ)上進(jìn)行消息類(lèi)型的擴(kuò)展。

此篇文章里的代碼是基于 網(wǎng)易云信 NIM_Web_Demo 進(jìn)行修改的

如下圖所示的消息類(lèi)型

帶圖片和文字，并且可點(diǎn)擊的消息類(lèi)型

標(biāo)題是Web版，可想而知，肯定還有其他如 iOS版，Android版等，不可能此類(lèi)型的消息（我稱(chēng)它為圖文消息）只支持web，而在iOS或Android端無(wú)法顯示問(wèn)題。以下附上其他版本擴(kuò)展的鏈接，Web版 和 H5移動(dòng)版很相似，因?yàn)槎际鞘褂猛粋€(gè)sdk）

• 網(wǎng)易云信-新增自定義消息（Android版）

正文

1. 按照GitHub里的步驟

node環(huán)境工程部署，將工程克隆到本地，使用靜態(tài)服務(wù)啟動(dòng)本工程。

1. npm install
2. node app
3. 在瀏覽器中訪問(wèn)
   http://127.0.0.1:8182/webdemo/index.html

2. 運(yùn)行沒(méi)有問(wèn)題后，修改文件配置 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];
    // 是否開(kāi)啟訂閱服務(wù)
    window.CONFIG.openSubscription = true;
})();

3. 添加觸發(fā)自定義消息發(fā)送功能，主要用于我們開(kāi)發(fā)調(diào)試。

這個(gè)功能主要用于我們給網(wǎng)站用戶(hù)發(fā)送促銷(xiāo)或活動(dòng)等使用，圖文鏈接消息的發(fā)送功能不開(kāi)放給用戶(hù)。下圖給出示例圖，當(dāng)用戶(hù)點(diǎn)擊咨詢(xún)時(shí)，我們自動(dòng)給他回復(fù)一條圖文鏈接消息。

用戶(hù)點(diǎn)擊網(wǎng)站上的咨詢(xún)時(shí)，自動(dòng)發(fā)送一條圖文鏈接消息

此處有些讀者可能會(huì)想，這有什么難的，不就是個(gè)網(wǎng)頁(yè)嘛。后臺(tái)自動(dòng)回復(fù)消息時(shí)發(fā)送一段如下的html代碼，然后設(shè)置下樣式排版一下就行了。

<a href="#" style="樣式省略了">
   <div>頭部標(biāo)題</div>
   <img src="圖片" />
   <div>底部描述</div>
</a>

這樣一來(lái)就有個(gè)問(wèn)題，消息顯示面板支持發(fā)送html代碼了。其他懂行行家要是發(fā)送如下的代碼就慘了。

發(fā)送一段無(wú)限循環(huán)javascript腳本

應(yīng)該沒(méi)人會(huì)這么傻吧，自己坑害自己。當(dāng)然我們使用js的 escape 和 unescape 在消息的收發(fā)的時(shí)候轉(zhuǎn)化下就好了。
但是此時(shí)我們要是在app里看這個(gè)消息

因?yàn)橄⑹峭降?，所以在其他端也能看到消?/div>

看到的卻是網(wǎng)頁(yè)代碼，要是在PC客戶(hù)端看這條消息肯定也是這樣。當(dāng)然我們可以針對(duì)不平終端使用正則或者模版匹配然后使其顯示成我們想要的樣子，如此一來(lái)，又有個(gè)問(wèn)題，消息推送內(nèi)容的顯示。如下圖

因?yàn)榘l(fā)送的是一段普通文本類(lèi)型消息，所以會(huì)顯示消息內(nèi)容

還有其它問(wèn)題我就不一一列出了，你會(huì)發(fā)現(xiàn)自己在這條不歸路上越陷越深，做各種兼容，哪天產(chǎn)品需求一變你就痛苦去吧。（我為什么花一個(gè)篇幅來(lái)說(shuō)這個(gè)問(wèn)題。1.這種解決問(wèn)題的方式是在給自己挖坑。2.作為一個(gè)開(kāi)發(fā)工程師第一時(shí)間應(yīng)該想到的是擴(kuò)展。3.我們目前就是這種做法，我看著是著實(shí)的難受。）

編輯 message.js，在sendTextMessage函數(shù)中添加如下代碼，正式上線后，此處應(yīng)該注釋掉。

點(diǎn)擊我傳送

// 添加此處代碼是用來(lái)開(kāi)發(fā)調(diào)試發(fā)送自定義的消息類(lèi)型，當(dāng)發(fā)送 custom 給對(duì)方時(shí)進(jìn)入該邏輯
if (text.length > 0 && text == 'custom') {
    // 此處不可能是寫(xiě)死的，應(yīng)該是后臺(tái)可配置的，發(fā)送的數(shù)據(jù)結(jié)構(gòu)如下
    var content = {
        type: 5,  // 自定義消息類(lèi)型為5，此處的消息類(lèi)型必須和其他平臺(tái)的圖文消息類(lèi)型一致
        data: {
            title: '暖冬季歡樂(lè)送',   // 消息標(biāo)題
            describe: '家具滿(mǎn)1000元減100元再返100元現(xiàn)金券！點(diǎn)擊查看詳情！',   // 消息描述
            link_url: 'http://www.itdecent.cn/p/dadd344b6413',  // 點(diǎn)擊跳轉(zhuǎn)的URL
            image_url: 'https://netease.im/res/image/download/section1.png?v=002' // 消息中的圖片地址
        }
    };
    // 發(fā)送自定義消息
    this.mysdk.sendCustomMessage(scene, to, content, this.sendMsgDone.bind(this));
    return;
}

如上操作完成后，嘗試發(fā)送 custom 給對(duì)方時(shí)顯示如下。

輸入框輸入 custom 觸發(fā)上面的條件

4. 自定義消息的顯示
   自定義消息類(lèi)型的顯示在 util.js 的 getMessage 函數(shù)中處理，添加如下代碼

點(diǎn)我傳送

case 'custom':
    var content = JSON.parse(msg.content);
    if (content.type === 1) {
        str = sentStr + '一條[猜拳]消息,請(qǐng)到手機(jī)或電腦客戶(hù)端查看';
    } else if (content.type === 2) {
        str = sentStr + '一條[閱后即焚]消息,請(qǐng)到手機(jī)或電腦客戶(hù)端查看';
    } else if (content.type === 3) {
        var catalog = _$escape(content.data.catalog),
            chartvar = _$escape(content.data.chartlet);
        str = '<img class="chartlet" onload="loadImg()" src="./images/' + catalog + '/' + chartvar + '.png">';
    } else if (content.type == 4) {
        str = msg.fromNick + '發(fā)起了[白板互動(dòng)]';
    } else if (content.type == 5) {
        // 添加消息類(lèi)型為 5，顯示圖文消息內(nèi)容
        var obj = content.data;
        str = `<a class="imgtxt" href=${obj.link_url} target="_blank">`;
        str += `<div class="imgtxt-title">${obj.title}</div>`;
        if (obj.image_url && obj.image_url.trim() != '') {
            str += `<img class="imgtxt-img" src=${obj.image_url} />`;
        }
        if (obj.describe && obj.describe.trim() != '') {
            str += `<div class="imgtxt-describe">${obj.describe}</div>`;
        }
        str += `</a>`;
    } else {
        str = sentStr + '一條[自定義]消息，請(qǐng)到手機(jī)或電腦客戶(hù)端查看';
    }
break;

上面添加后，還需在 main.js 中添加對(duì)應(yīng)的 html class 屬性，代碼如下

點(diǎn)我傳送

.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端的擴(kuò)展自定義消息已經(jīng)完成。當(dāng)然，這只是Web的顯示正常了，其他如Android，iOS，pc等客戶(hù)端收到此類(lèi)的消息，顯示有問(wèn)題，也是需要擴(kuò)展調(diào)整的。此篇文章其他端的文章我會(huì)陸續(xù)更新，如果有需要的同學(xué)可以關(guān)注下。

以下附上其他版本擴(kuò)展的鏈接

• 網(wǎng)易云信-新增自定義消息（Android版）