网易云信-新增自定义消息(H5移动版)

前言

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

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

如下图所示的消息类型

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

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


正文

  1. 将github上的工程 git clone 或者下载到本地

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

  1. npm install
  2. npm run server
  3. 在浏览器中访问
    http://127.0.0.1:2001
  1. 运行没有问题后,修改文件配置 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'
    }
};
//...
  1. 添加触发自定义消息发送功能,主要用于我们开发调试。

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

用户点击首页上的咨询时,自动发送一条图文链接消息

编辑 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 点击发送按钮, 触发上面的条件

显示[自定义消息],这个不是我们所期待的,所以接下在添加代码使其显示正常

  1. 自定义消息的显示
    自定义消息类型的显示在 ChatItem.vuebeforeMount 函数中处理,添加如下代码

点我传送

// 此处省略前面代码
} 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等客户端收到此类的消息,显示有问题,也是需要扩展调整的。此篇文章其他端的文章我会陆续更新,如果有需要的同学可以关注下。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容