直播聊天室JS-SDK

概述

为方便开发者快速接入页面聊天室功能,保利威提供了带有默认样式的聊天室的JS-SDK。

快速开始

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和mediaChannelKey,传给js-sdk

http://dev.polyv.net/2019/liveproduct/l-api/zbglgn/pdcz/get-chat-token/

5、新建对象

var chatroom = new PolyvChatRoom({
    roomId: '268682',
    userId: '153075602311',
    nick: '游客',
    pic: 'http://livestatic.videocc.net/assets/wimages/missing_face.png',
    token: token,
    mediaChannelKey: mediaChannelKey,
    version: '2.0',
    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,三分屏场景下学员需设置为slice
accountId String 直播账号userId,用于开启全局严禁词
token String 校验码
mediaChannelKey String 连麦相关参数
version String 版本号,默认为2.0
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 自定义菜单栏
customChatColor Object 自定义消息颜色
apiPrefix Object 自定义域名
enableRewardAnimation Boolean 是否开启打赏动画效果,默认为true(新增)
enableUpdatePageviews Boolean 是否开启热度更新,默认为true(新增)

自定义菜单栏

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

name: 菜单栏名称

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

已有内置类型

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

自定义消息颜色

说明:修改消息字体/背景颜色,可针对自己/普通用户/管理员/讲师/助教/嘉宾修改

名称 类型 是否必须 说明
selfBgColor String 自己消息背景颜色,默认为 #8bc34a
selfColor String 自己消息颜色,默认为 #fff
otherBgColor String 普通用户消息背景颜色,默认为 #fff
otherColor String 普通用户消息颜色,默认为 #546e7a
specialBgColor String 特殊用户消息背景颜色,可以统一设置管理员/讲师/助教/嘉宾的背景颜色,默认为 #fff
specialColor String 特殊用户消息颜色,可以统一设置管理员/讲师/助教/嘉宾的消息颜色,默认为 #2196f3
managerBgColor String 管理员消息背景颜色
managerColor String 管理员消息颜色
teacherBgColor String 讲师消息背景颜色
teacherColor String 讲师消息颜色
assistantBgColor String 助教消息背景颜色
assistantColor String 助教消息颜色
guestBgColor String 嘉宾消息背景颜色
guestColor String 嘉宾消息颜色

自定义域名

名称 类型 是否必须 说明
socketHost String 聊天室域名,默认为chat.polyv.net
chatApi String 聊天室接口域名,默认为apichat.polyv.net

其他

获取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

结果说明

data为一个对象数组,具体内容如下

名称 类型 说明
content String 发言消息文本内容
id String 该条记录ID
time 13位时间戳 发言时间戳
user Object 发言人

user说明

名称 类型 说明 是否一定存在该字段
nick String 昵称
pic String 头像
userId String 唯一标识
clientIp String IP地址
banned Boolean 是否被禁言
userType String 类型
userSource String 来源
actor String 头衔
roomId String 房间号
channelId String 频道号
uid String socket连接唯一id

注:
1. clientIp默认为空,暂不支持返回内容值;
2. userType包含值可能有:空/student/slice/teacher/manager/assistant/guest/viewer等;

获取在线列表

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

参数说明

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

结果说明

data为一个对象,具体内容如下

名称 类型 说明
count Number 在线人数
userlist Array 在线学员对象数组

userlist说明
userlist对象数组元素具体说明请参考“获取聊天历史记录”方法user说明。

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: ""
    }

互动功能socket消息说明

登入消息

LOGIN:

登录消息,登录房间的时候服务器会广播这一消息

监听回调返回的数据:

{
    "EVENT":"LOGIN",
    "onlineUserNumber":3,
    "user": {
        "clientIp":"59.42.43.28",
        "nick":"广州观众/32199",
        "pic":"//livestatic.videocc.net/v_60/assets/wimages/missing_face.png",
        "roomId":"100781",
        "uid":"CxJj8Ap3C9jN1UHKAJ_V",    
        "userId":"1499917692338" 
        "userType": "" 
    }
}

说明

名称 类型 说明
onlineUserNumber number 当前房间在线总人数
clientIp 用户IP
nick string 用户昵称
pic 用户头像
roomId 房间号
uid socket分配的id
userId 用户唯一标识
userType teacher、assistant、manager、slice 用户类型,目前有teacher(老师)、assistant(助教)、manager(管理员)、slice(云课堂学员)

登出消息

LOGOUT

说明:登出消息,有人离开房间(包括刷新页面)时服务器会广播这一消息

监听回调返回数据:

EVENT: "LOGOUT",
onlineUserNumber: 3,
uid: "I_o3f4sHDzAHM4LVAJTX"
名称 类型 说明
onlineUserNumber number 当前房间在线总人数
uid string 离开人的socket.id

接收别人发言消息

SPEAK:

说明:发言,接收别人的发言消息(不包括自己)

发送:

socket.emit('message', JSON.stringify({
    EVENT: 'SPEAK',
    values: [value],                //发言内容
    roomId: roomId                //当前房间号
}));

字段说明:

名称 类型 说明 是否必填 默认值
EVENT String 事件名
values Array 发言内容,提交的发言是数组的第一个元素
roomId String 对应的频道号

监听回调返回的数据:

{
    "EVENT": "SPEAK",
    "id": "f1e4a960-6abc-11e7-ac0a-379e251bb30e",
    "time": 1500274540278,
    "user": {
        "clientIp": "59.42.40.89",
        "nick": "rururu",
        "pic":"//livestatic.videocc.net/v_60/assets/wimages/missing_face.png",
        "roomId": "100781",
        "uid": "yP-HnXTEZyToxP0TAGCS",
        "userId": "1500274526077",
        "userType": "" 
    },
    "values": ["sadasd"]
}
名称 说明
id 消息唯一标志
time 时间戳
user 发言人
values 消息内容

公告消息

GONGGAO:

说明:当管理员发言时,服务器会将管理员的消息做为公告处理,当重新进入页面时,如有公告,服务器会广播这一消息。

监听回调返回的数据:

{
    "EVENT": "GONGGAO",
    "content": "POLYV保利威视" 
}
名称 说明
content 公告内容

公告消息

BULLETIN

说明:公告消息,当重新进入页面时,如有公告,服务器会广播这一消息。

监听回调返回的数据:

EVENT: "BULLETIN",
content: "???/",
roomId: "105240"
名称 类型 说明
content string 公告内容
roomId number/string 当前房间号(重新进入房间收到这一消息不会带roomId)

送花消息

FLOWERS:

说明:送花

监听回调返回的数

{
    "EVENT":"FLOWERS",
    "nick":"广州观众/81366",
    "uimg":"//livestatic.videocc.net/v_60/assets/wimages/missing_face.png" 
}
名称 说明
nick 送花人昵称
uimg 送花人头像(新增)

点赞消息

LIKES:

说明: 点赞

监听回调返回的数据:

{
    "EVENT":"LIKES",
    "count":160,
    "nick":"广州观众/81366" 
}
名称 说明
count 当前点赞总数,若发生消息的时候没传此属性,则不返回这个属性
nick 点赞人昵称

禁言

SHIELD:

说明: 禁言

监听回调返回的数据:

注:userId或ip只会返回一个

{
    EVENT: 'ADD_SHIELD',
    value:  '', // 被禁言用户userId值或ip值
    data: {
        banType: 'userId/ip', // 禁言类型 userId/ip
        userId: '', // 被禁言用户userId值
        ip:'', // 被禁言用户ip值
    }
}

解除禁言

REMOVE_SHIELD:

说明: 解除禁言

监听回调返回的数据:

解除userId
{
    EVENT: 'REMOVE_SHIELD',
    value: '', // 被禁言用户userId值
    data: {
        banType: 'userId', // 禁言类型
        userId: '' // 被禁言用户userId值
    }
}
解除ip
{
    EVENT: 'REMOVE_SHIELD',
    value: '',// 被禁言用户ip值
    data: {
        banType 'ip', // 禁言类型
        ip: '' // 被禁言用户ip值
    }
}

踢人

KICK:

说明: 踢人

监听回调返回的数据:

{
    "EVENT":"KICK",
    "user": {
        "clientIp":"59.42.40.89",
        "nick":"林林林",
        "pic":"//livestatic.videocc.net/v_60/assets/wimages/missing_face.png",
        "roomId":"100781",
        "uid":"118GWVRA24PR14coA3bz",
        "userId":"1500275476199",
        "userType":"" 
    }
}
名称 说明
user 被踢用户对象

解除踢人

UNKICK:

说明: 解除踢人

监听回调返回的数据:

解除userId
{
    "EVENT":"UNKICK",
    "kickType": "userId"
    "userId": "1500275476199" //踢出值
}
解除ip
{
    "EVENT":"UNKICK",
    "kickType": "ip"
    "ip": "127.0.0.1" //踢出值
}
名称 说明
kickType 踢出方式
ip 踢出IP
userId 踢出userId

删除某条聊天记录

REMOVE_CONTENT:

说明:删除某条聊天记录,需要通过HTTP接口调用

监听回调返回的数据:

{
    "EVENT":"REMOVE_CONTENT",
    "content":"asd",
    "id":"54b04e90-6acd-11e7-abcd-a985dda00975",
    "roomId":"100781" 
}
名称 说明
content 删除的内容
id 删除内容对应的id
roomId 房间号

清空聊天记录

REMOVE_HISTORY:

说明:清空聊天记录

监听回调返回的数据:

{
    "EVENT":"REMOVE_HISTORY" 
}

关闭聊天室

CLOSEROOM:

说明:关闭聊天室

监听回调返回的数据:

{
    "EVENT":"CLOSEROOM",
    "value": {
      "closed":true,    
      "roomId":"100781" 
    }
}
名称 说明
closed true为关闭,false为开启
roomId 房间号

关闭弹幕

CLOSE_DANMU:

说明:关闭弹幕

监听回调返回的数据:

{
    "EVENT": "CLOSE_DANMU",
    "isClose": true
}
名称 说明
isClose true为关闭,false为开启

自定义消息接收事件

CUSTOMER_MESSAGE:

说明:自定义消息接收事件,目前只能通过后台管理员调用HTTP接口发送消息,可参考http://dev.polyv.net/2016/12/send-chat/

监听回调返回的数据:

{
    "EVENT" : "CUSTOMER_MESSAGE",
    "roomId" : 100781,
    "image":"http://livestatic.videocc.net/assets/wimages/pc_images/logo.png",
    "content" : "这是一条自定义消息" 
}
名称 说明
roomId 房间号
image 消息图片(根据发送的消息是否有图片决定)
content 消息内容

答题卡

说明:答题卡包含”快速问答“和”答题卡“两个功能

GET_TEST_QUESTION_CONTENT

说明:获取答题卡题目和选项内容

响应:

名称 类型 说明
questionId string 问题ID
itemType string 答题类型,1表示快速问答,0表示答题卡
type string 题目类型,R表示单选,C表示多选,S表示评分(快速问答无此类型题目)
answer string 题目答案,多个答案则直接拼接,如选A和B,则返回AB
option1 string 选择项1,选项最少2个,最多5个。注:当使用”导入题库“导入题目时,会多出5个选项(option6~option10),值都为null
option2 string 选择项2
option3 string 选择项3
option4 string 选择项4
option5 string 选择项5
title string 题目标题
hash string 校验码
ts string 时间戳
tips1 string 提示语1,提示语只有在题目类型为评分时才有
tips2 string 提示语2
tips3 string 提示语3
tips4 string 提示语4
tips5 string 提示语5

GET_TEST_QUESTION_RESULT

说明:获取答题卡答题结果

响应:

名称 类型 说明
questionId string 问题ID
result object 答题结果
content object 题目详情

答题结果属性说明:

名称 类型 说明
singleResult array 各个选项被选次数
total number 回答总人数
answer string 答案
rightUser Array 答对学员
faultUser Array 答错学员
itemType string 答题类型,1表示快速问答,0表示答题卡
type string 题目类型,R表示单选,C表示多选,S表示评分(快速问答无此类型题目)

ANSWER_TEST_QUESTION

说明:发送答案

请求:

socket.emit('message', JSON.stringify({
    EVENT: 'ANSWER_TEST_QUESTION',
    roomId: channelId,
    nick: nick,
    userId: userId,
    option: result,
    questionId: questionId
}));

字段说明:

名称 类型 说明 是否必填 默认值
EVENT String 事件名
roomId String 房间号
nick String 昵称
userId String 学生ID
option String 选择的答案,多选时直接将多个答案拼接。如,选A和B,则option为AB
questionId String 问题ID

咨询提问

S_QUESTION

说明:学生提问内容

响应:

{
    EVENT: 'S_QUESTION',
    roomId: roomId,
    user: {
        nick: nick,
        pic: pic,
        userId: userId,
        userType: 'student'
    },
    content: value
}

字段说明:

名称 说明
EVENT 事件名
roomId 房间号
user 用户信息
content 提问内容

用户信息说明:

名称 说明
nick 昵称
pic 头像
userId 学员id
userType 类型

T_ANSWER

说明:老师/管理员/助教回复提问

响应:

{
    EVENT: 'T_ANSWER',
    roomId: roomId,
    user: {
        nick: nick,
        pic: pic,
        userId: userId,
        userType: 'teacher',
        actor: actor
    },
    s_userId: s_userId
    content: value
}

字段说明:

名称 说明
EVENT 事件名
roomId 房间号
user 用户信息
s_userId 被回复学员的id
content 回复内容

用户信息说明:

名称 说明
nick 昵称
pic 头像
userId 讲师/助教/管理员id
userType 类型:teacher/assistant/manager
actor 头衔

问卷

START_QUESTIONNAIRE

说明:开始问卷调查

响应:

名称 类型 说明
questionnaireId String 问卷ID
content Object 问卷内容

问卷内容说明:

名称 类型 说明
questionnaireId String 问卷ID
questionnaireTitle String 问卷标题
createdTime 13位时间戳 问卷创建时间
status String 问卷状态,saved:保存,published:已发布,forbidden:禁止
questions Array 问题信息,为一个对象数组

问题信息说明:

名称 类型 说明
questionId String 题目ID
name String 题目标题
type String 题目类型,R:单选,C:多选,Q:问答
answer String 题目答案
required String 是否必填,Y:是,N:否
scoreEnabled String 是否为得分题,Y:是,N:否
score Number 分数
option1 String 题目选项
option2 String 题目选项
option3 String 题目选项
option4 String 题目选项
option5 String 题目选项
option6 String 题目选项
option7 String 题目选项
option8 String 题目选项
option9 String 题目选项
option10 String 题目选项

ANSWER_QUESTIONNAIRE

说明:学生提交问卷答案

请求:

socket.emit('message', JSON.stringify({
    EVENT: 'ANSWER_QUESTIONNAIRE',
    roomId: roomId,
    nick: nick,
    userId: userId,
    questionnaireId: questionnaireId,
    answer: [
        {
            questionId: 'f8bbo3rhrq',
            answer: 'A'
        },
        {
            questionId: 'f8bbo3rhlw',
            answer: "BC"
        },
        {
            questionId: 'f8bbo3rhht',
            answer: 'polyv'
        }
    ]
}));

字段说明:

名称 类型 说明 是否必填 默认值
EVENT String 事件名
roomId String 房间ID
nick String 学生昵称
userId String 学生对应的userId
questionId String 题目ID
answer Array 学生的答案,为一个对象数组

答案字段说明:

名称 类型 说明
questionId String 题目ID
answer String 答案,如果为选择题,则为ABCD,如果为问答题,为学生填写输入框的内容

STOP_QUESTIONNAIRE

说明:老师停止问卷

响应:

名称 类型 说明
questionnaireId String 问卷ID

QUESTIONNAIRE_ACHIEVEMENT

说明:讲师点击发送问卷结果按钮,如果学员有回答问卷,则该学员在观看端会收到问卷排名结果事件。

响应:

名称 类型 说明
EVENT String 值为QUESTIONNAIRE_ACHIEVEMENT
roomId String 房间号
totalScore Number 该学员回答该问卷的总分数
userId String 该学员的userId
timestamp Number 该学员提交问卷答案时的时间戳
questionnaireId String 问卷id
ranking Number 该学员在本次问卷中分数的排名,从1开始计

自定义消息

说明:客户可以根据自己的业务需求,自己定义想要的消息去广播。

请求

socket.emit('customMessage', JSON.stringify({
    EVENT: 'myMessage',
    version: '1.0',
    emitMode: 1,
    roomId: roomId,
    data: {
        company: 'polyv'
    },
    tip: '我的自定义消息',
}));

字段说明:

名称 类型 说明 是否必填 默认值
EVENT String 自定义消息类型,事件字符长度不大于20
version Number 自定义消息版本
emitMode Number 是否广播给自己,0表示广播所有人包括自己,1表示广播给所有人除了自己,2表示只发送给自己 0
roomId Number 对应的频道id
data Object 自定义消息内容,由客户定义
tip String 提示语

响应:

名称 类型 说明
EVENT String 自定义消息类型,事件字符长度不大于20
version Number 自定义消息版本
emitMode Number 是否广播给自己,0表示广播所有人包括自己,1表示广播给所有人除了自己,2表示只发送给自己
roomId Number 对应的频道id
id String 消息id
user Object 用户信息
time Number 时间戳
data Object 自定义消息内容,由客户定义
tip String 提示语

签到

SIGN_IN

说明:发起签到

响应:

名称 类型 说明
EVENT String 值为SIGN_IN
roomId String 频道号
data Object 包含四个属性:message:签到文案;limitTime:签到时间(单位秒);sessionId:直播场次ID;checkinId:签到场次ID

STOP_SIGN_IN

说明:结束签到

响应:

名称 类型 说明
EVENT String 值为STOP_SIGN_IN
roomId String 频道号

TO_SIGN_IN

说明:学员签到

响应:

名称 类型 说明
EVENT String 值为TO_SIGN_IN
roomId String 频道号
checkinId String 签到场次ID
user Object 签到学员信息,包含两个属性:nick:学员昵称,userId:学员ID

抽奖

说明:抽奖是通过http接口发起的,以下消息是服务器广播给页面的

LotteryStart

说明:开始抽奖

响应:

名称 类型 说明
EVENT String 值为LotteryStart
channelId String 频道号
sessionId String 当前直播场次ID
lotteryId String 当前抽奖场次id

LotteryEnd

说明:结束抽奖

响应:

名称 类型 说明
EVENT String 值为LotteryEnd
channelId String 频道号
sessionId String 当前直播场次ID
lotteryId String 当前抽奖场次id
prize String 礼物名称
data Array 中奖人员,包含中奖人员基本信息以及中奖码winnerCode。若没中奖为空数组

示例:

{
    "EVENT":"LotteryEnd",
    "channelId":"",
    "sessionId":"fajrsh0uqj",
    "lotteryId":"fapcpw06l2",
    "prize":"耳机",
    "data":[
        {
            "banned":false,
            "channelId":"",
            "clientIp":"",
            "nick":"广州观众/97375",
            "pic":"//livestatic.videocc.net/v_268/assets/wimages/missing_face.png",
            "roomId":"",
            "uid":"lbcCDoikWTniMk1pAMkI",
            "userId":"1553597220784",
            "userType":"student",
            "winnerCode":"xXYMNZJR"
        }
    ]
}
其他

提交中奖者信息需要调用http接口,详见抽奖-提交中奖者信息

打赏

注:打赏需通过http接口触发,详见打赏-发送打赏消息

REWARD

说明:打赏

响应:

名称 类型 说明
EVENT String 值为REWARD
roomId String 房间号
content Object 打赏内容

打赏内容说明:

名称 类型 说明
unick String 打赏者昵称
uimg String 打赏者头像
rewardContent String 打赏内容:礼物打赏为礼物名称,现金打赏为金额
gimg String 礼物打赏为礼物图片,现金打赏为空

DEMO下载

demo

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...