網易云信-新增自定義消息（Web版）

前言

公司業務需要，PC端，移動端都用到了第三方 網易云信 IM 來實現在線客服咨詢。
在這當中難免遇到一些需求是網易云信沒有提供，需要自行編碼進行擴展的。寫此篇文章的目的正是因業務需要，需要在網易云信的基礎上進行消息類型的擴展。

此篇文章里的代碼是基于 網易云信 NIM_Web_Demo 進行修改的

如下圖所示的消息類型

帶圖片和文字，并且可點擊的消息類型

標題是Web版，可想而知，肯定還有其他如 iOS版，Android版等，不可能此類型的消息（我稱它為圖文消息）只支持web，而在iOS或Android端無法顯示問題。以下附上其他版本擴展的鏈接，Web版 和 H5移動版很相似，因為都是使用同一個sdk）


正文

  1. 按照GitHub里的步驟

node環境工程部署，將工程克隆到本地，使用靜態服務啟動本工程。

  1. npm install
  2. node app
  3. 在瀏覽器中訪問
    http://127.0.0.1:8182/webdemo/index.html
  1. 運行沒有問題后，修改文件配置 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;
})();
  1. 添加觸發自定義消息發送功能，主要用于我們開發調試。

這個功能主要用于我們給網站用戶發送促銷或活動等使用，圖文鏈接消息的發送功能不開放給用戶。下圖給出示例圖，當用戶點擊咨詢時，我們自動給他回復一條圖文鏈接消息。

用戶點擊網站上的咨詢時，自動發送一條圖文鏈接消息

此處有些讀者可能會想，這有什么難的，不就是個網頁嘛。后臺自動回復消息時發送一段如下的html代碼，然后設置下樣式排版一下就行了。

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

這樣一來就有個問題，消息顯示面板支持發送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: 'http://www.lxweimin.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 觸發上面的條件
  1. 自定義消息的顯示
    自定義消息類型的顯示在 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 = '<img class="chartlet" onload="loadImg()" src="./images/' + catalog + '/' + chartvar + '.png">';
    } else if (content.type == 4) {
        str = msg.fromNick + '發起了[白板互動]';
    } else if (content.type == 5) {
        // 添加消息類型為 5，顯示圖文消息內容
        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 + '一條[自定義]消息，請到手機或電腦客戶端查看';
    }
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等客戶端收到此類的消息，顯示有問題，也是需要擴展調整的。此篇文章其他端的文章我會陸續更新，如果有需要的同學可以關注下。

以下附上其他版本擴展的鏈接

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容