156 lines
5.4 KiB
HTML
156 lines
5.4 KiB
HTML
<html lang="cn">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title></title>
|
|
<{template "common" }>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<template>
|
|
<el-alert
|
|
v-show="roomNum"
|
|
:title="roomNum"
|
|
type="warning">
|
|
</el-alert>
|
|
<el-select v-model="messageType">
|
|
<el-option label="全部" value=""></el-option>
|
|
<el-option label="评论" value="1"></el-option>
|
|
<el-option label="点赞" value="2"></el-option>
|
|
<el-option label="来了" value="3"></el-option>
|
|
<el-option label="关注" value="4"></el-option>
|
|
<el-option label="礼物" value="5"></el-option>
|
|
<el-option label="人数" value="6"></el-option>
|
|
<el-option label="粉丝团" value="7"></el-option>
|
|
</el-select>
|
|
<el-table
|
|
:data="douyinMessages"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="avatar"
|
|
label="头像">
|
|
<template slot-scope="scope">
|
|
<el-avatar :size="50"><img :src="scope.row.avatar"/></el-avatar>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="nickname"
|
|
label="昵称">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="content"
|
|
label="内容">
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
prop="time"
|
|
label="时间">
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
</div>
|
|
<script src="/static/js/reconnecting-websocket.min.js"></script>
|
|
<script src="/static/js/functions.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
socket:null,
|
|
douyinMessages:[],
|
|
roomNum:"",
|
|
messageType:"",
|
|
settings:null,
|
|
apiBase:"",
|
|
},
|
|
methods: {
|
|
//初始化websocket
|
|
initConn:function() {
|
|
this.socket = new ReconnectingWebSocket("http://127.0.0.1:8888");
|
|
this.socket.debug = true;
|
|
this.socket.onmessage = this.OnMessage;
|
|
this.socket.onopen = this.OnOpen;
|
|
},
|
|
OnOpen:function() {
|
|
console.log("ws:onopen");
|
|
},
|
|
OnMessage:function(e) {
|
|
let message=JSON.parse(e.data);
|
|
console.log(message);
|
|
var liveData = JSON.parse(message['Data']);
|
|
console.log(liveData);
|
|
if (message["Type"] == 6) {
|
|
this.roomNum = liveData["Content"]+",当前人数："+liveData["OnlineUserCount"];
|
|
}
|
|
if(this.messageType!="" && message["Type"]!=this.messageType) return;
|
|
if (this.douyinMessages.length > 10) {
|
|
this.douyinMessages.shift();
|
|
}
|
|
var nickname = liveData['User'] ? liveData['User']['Nickname'] : "";
|
|
var avatar = liveData['User'] ? liveData['User']['HeadImgUrl'] : "";
|
|
var visitorId=liveData['User'] ? liveData['User']['SecUid'] : "";
|
|
this.douyinMessages.push({
|
|
content: liveData['Content'],
|
|
nickname: nickname,
|
|
avatar: avatar,
|
|
time:getNowDate()
|
|
});
|
|
this.getAIReply(visitorId,nickname,avatar,liveData['Content']);
|
|
|
|
},
|
|
getAIReply(visitorId,visitorName,avatar,content){
|
|
let _this=this;
|
|
if(!_this.apiBase) return;
|
|
$.post(_this.apiBase,{
|
|
visitor_id:visitorId,
|
|
content:content,
|
|
visitor_name:visitorName,
|
|
avatar:avatar,
|
|
},function (res) {
|
|
|
|
if(!res.result.content) return;
|
|
_this.getAIAudio(res.result.content);
|
|
});
|
|
},
|
|
getAIAudio(content){
|
|
let _this=this;
|
|
console.log(content);
|
|
let json={
|
|
message:content,
|
|
}
|
|
$.ajax({
|
|
type: "post",
|
|
dataType: "json",
|
|
url: "http://127.0.0.1:8091/audio",
|
|
contentType: "application/json;charset=UTF-8",
|
|
data: JSON.stringify(json),//将js对象转成json对象
|
|
success: function (data) {
|
|
}
|
|
});
|
|
},
|
|
getSetting(){
|
|
let _this=this;
|
|
$.get("/getSetting",function (res) {
|
|
console.log(res);
|
|
_this.settings=res;
|
|
_this.apiBase=_this.getConfig("apiBase");
|
|
});
|
|
},
|
|
getConfig(key){
|
|
for(index in this.settings){
|
|
if(key==this.settings[index].key){
|
|
return this.settings[index].value;
|
|
}
|
|
}
|
|
return "";
|
|
},
|
|
},
|
|
mounted:function(){
|
|
this.initConn();
|
|
this.getSetting();
|
|
},
|
|
created: function () {
|
|
}
|
|
})
|
|
</script>
|
|
</body> |