live2d 模块扩展教程

xxxxxxxxxx
ws = new WebSocket('ws://localhost:44446'); // 1.创建websocket链接

开始注册信息

xxxxxxxxxx
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: '' // 按钮图标
  }
};

xxxxxxxxxx
ws.onopen = () => { // 当 websocket 建立的时候开始向 live2d 模块发送注册信息
   this.live2d.ws.send(JSON.stringify(this.live2d.register));
}

xxxxxxxxxx
ws.onerror = (event) => { // 当 websocket 发生异常时
    this.$message.warning('需要先启动挂件插件');
    this.live2d.enabled = false;
    if (ws) {
        ws.close();
    }
    ws = null;
}

接收信息

xxxxxxxxxx
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);
            }
    }
}

发送信息

xxxxxxxxxx
ws.send(JSON.stringify({
  code: 'xiaou-demo', // 注册时候code值
  type: 'message',
  message: '你好丫', // 信息
  duration: '2000'// 毫秒(ms) 默认 2000 气泡框持续时间
})) 

ws.close 事件触发

xxxxxxxxxx
ws.onclose = () => {
    ws.send(JSON.stringify({
        code: 'xiaou-demo', // 注册时候code值
        type: 'death'
    }))
    ws = null
}

使用默认live2d面板注册

xxxxxxxxxx
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

• 其他都差不多