live2d 模块扩展教程
ws = new WebSocket('ws://localhost:44446'); // 1.创建websocket链接
开始注册信息
const register = {
type: 'register',
mode: 'new',
author: 'xiaou', // 作者
desc: 'demo', // 描述
code: 'xiaou-demo', // 自定义唯一的值，保证每次注册值都一样,
btn1: { // 可选按钮一
trigger: 'xiaou1', // 触发事件后服务器 ws 发过来的标识符,
icon: '' // 按钮图标
},
btn2: { // 可选按钮二
trigger: 'xiaou2', // 触发事件后服务器 ws 发过来的标识符,
icon: '' // 按钮图标
},
btn3: { // 可选按钮三
trigger: 'xiaou3', // 触发事件后服务器 ws 发过来的标识符,
icon: '' // 按钮图标
}
};
ws.onopen = () => { // 当 websocket 建立的时候开始向 live2d 模块发送注册信息
this.live2d.ws.send(JSON.stringify(this.live2d.register));
}
ws.onerror = (event) => { // 当 websocket 发生异常时
this.$message.warning('需要先启动挂件插件');
this.live2d.enabled = false;
if (ws) {
ws.close();
}
ws = null;
}
接收信息
ws.onmessage = (event) => {
const data = event.data;
const json = JSON.parse(data);
console.log(json.type);
console.log(json);
switch (json.type) {
case 'death': // live2d 被关闭时通知
this.live2d.ws.close()
break
case 'notice': // 按钮通知
console.log('notice')
if (data.trigger === 'xiaou1') {
// 处理xiaou1按钮事件
} else if (data.trigger === 'xiaou2') {
// 处理xiaou2按钮事件
} else if (data.trigger === 'xiaou3') {
// 处理xiaou3按钮事件
}
break
case 'register': // 注册反馈
console.log('register')
if (data.status === 200) {
alert('live2d 开启成功');
} else {
alert(json.message);
}
}
}
发送信息
ws.send(JSON.stringify({
code: 'xiaou-demo', // 注册时候code值
type: 'message',
message: '你好丫', // 信息
duration: '2000'// 毫秒(ms) 默认 2000 气泡框持续时间
}))
ws.close 事件触发
ws.onclose = () => {
ws.send(JSON.stringify({
code: 'xiaou-demo', // 注册时候code值
type: 'death'
}))
ws = null
}
使用默认live2d面板注册
const ws = new WebSocket('ws://localhost:44446')
ws.onopen = () => {
const register = {
type: 'register',
mode: 'none', //
author: 'xiaou', // 作者
desc: 'test', // 描述
code: 'xiaou-mm' // 自定义唯一的值，保证每次注册值都一样
}
ws.send(JSON.stringify(register))
}
ps
