直播聊天室JS-SDK

介绍

为方便开发者快速接入页面聊天室功能,保利威提供了带有默认样式的聊天室的JS-SDK。如需使用聊天室其他功能和事件,请参考聊天室API

DEMO

demo

起步

1、html代码

<div id="wrap"></div>

2、引入css

<link rel="stylesheet" href="https://player.polyv.net/jssdk/polyv-chatroom.min.css">

3、引入js

<script src="https://player.polyv.net/jssdk/polyv-chatroom.min.js"></script>

4、请求token

需要先请求以下接口获取token

https://api.polyv.net/live/watchtoken/gettoken?ts=xxxx&sign=xxx

ts: 时间戳
sign: md5校验码
注:sign生成规则:md5(ts+"polyvsign")

5、新建对象

var chatroom = new PolyvChatRoom({
    roomId: '268682',
    userId: '153075602311',
    nick: '游客',
    pic: 'http://livestatic.videocc.net/assets/wimages/missing_face.png',
    token: token,
    container: '#wrap',
    width: 300,
    height: 600,
    userType: '',
    roomMessage: function(data) {
        // TODO
        // data为聊天室socket消息,当有聊天室消息时会触发此方法
        console.log(data);
    }
});

相关参数说明

名称 类型 是否必须 说明
roomId String 频道号
userId String 用户唯一id
pic String 用户头像
nick String 用户昵称,默认为‘游客’
userType String 用户类型,普通学员:student,云课堂学员:slice,讲师:teacher,管理员:manager,助教:assistant,嘉宾:guest,默认为student
accountId String 直播账号userId,用于开启全局严禁词
token String 校验码
roomMessage Function 聊天室消息回调函数
container String DOM选择器,HTML元素,用于嵌入默认聊天室样式

注:以下参数只有在传了container参数时才生效

名称 类型 是否必须 说明
width Number container宽度,默认300px
height Number container高度,默认600px
showUserList Boolean 是否显示在线列表。PC端默认开启,移动端默认关闭。当关闭时,tabData若含有在线列表对象也不显示
enableSetNickname Boolean 是否开启设置昵称功能,默认为false
enableWelcome Boolean 是否开启欢迎语,默认为true
enableFlower Boolean 是否开启送花功能,默认为true
enableLike Boolean 是否开启点赞,默认为true
enableOnlyTeacher Boolean 是否开启只看讲师功能,默认为true
enableBulletin Boolean 是否开启公告,默认为true
enableAsk Boolean 是否开启提问,默认为true(新增)
tabData Array 自定义菜单栏

自定义菜单栏


tabData: 对象数组,每个对象包含两个属性name,type,默认包含聊天tab

name: 菜单栏名称

type: 菜单栏类型,若不是已有内置类型,会嵌入一个不包含任何内容的div元素到页面

已有内置类型

type 说明
chat 互动聊天
user-list 在线列表
ask 提问

其他

获取chat对象

var chat = chatroom.chat;

获取socket对象

var socket = chat.socket;

发送聊天消息

chat.send('hello');

获取聊天历史记录

chat.getHistoryMessage(start, end)
.then(function (data) {
    // TODO
    console.log(data);
});

说明

名称 是否必须 说明
start 开始下标,默认为0
end 结束下标,默认为10

获取在线列表

chat.getUserList(page, len)
.then(function (data) {
    // TODO
    console.log(data);
});

说明

名称 是否必须 说明
page 页码,默认为1
len 条数,默认为100

sendMessage

说明:自己发言会触发此消息,会在roomMessage返回,也可以通过chat对象监听
例如:

    chat.on(events.SEND_MESSAGE, (event, data) => {
        // TODO
    });

返回数据:

    EVENT: "sendMessage"
    content: "自己发言"
    currentUser: true
    custom: false
    formatTime: "2019-04-25 18:06"
    imgchat: false
    mySelfSend: true
    reward: false
    time: 1556186781080
    user: {
        nick: "polyv",
        pic: "http://livestatic.videocc.net/assets/wimages/missing_face.png",
        userId: "1530756023116",
        roomId: "",
        channelId: ""
    }
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...