[插件][开源][桌面挂件][1.0.1]

xiaou

v 1.0.0

增加 live2d 挂件
开放 live2d 接口
文档详情到论坛下载和查看

xiaou

不建议使用

墨菲的猫

请问在哪下载

xiaou

墨菲的猫还在审核

xiaou

utools 桌面挂件 live2D模块扩展

通讯方式

使用 websocket通讯

创建websocket链接

const ws = new WebSocket("ws://localhost:44446");

接收数据

ws.onmessage = function (event) {
        const data = event.data
        console.log(data);
};

发送数据

ws.send(data)

所有数据都采用json的方式，需要发送数据之前JSON.stringify(data)

注册

使用默认创建的live2d

使用默认的live2d 可以发送信息但是不能有定制化操作，而且使用默认的可能和很多插件所有相同的live2d ，主要可以发送信息

{
    type: 'register',
    mode: 'none', // 
    author: '', // 作者
    desc: '', // 描述
    code: '', // 自定义唯一的值，保证每次注册值都一样
}

使用定制live2d 可定制聊天，可选按钮事件

{
    type: 'register',
    mode: 'new',
    author: '', // 作者
    desc: '', // 描述
    code: '', // 自定义唯一的值，保证每次注册值都一样,
    warmReminder: true/false // 可选 温馨提示 每30分钟发一句消息
    btn1: { // 可选按钮一
    		trigger: '', // 触发事件后服务器 ws 发过来的标识符,
    		icon: '', // 按钮图标
	},
    btn2: { // 可选按钮二
                trigger: '', // 触发事件后服务器 ws 发过来的标识符,
                icon: '', // 按钮图标
    },
	btn3: { // 可选按钮三 
    		trigger: '', // 触发事件后服务器 ws 发过来的标识符,
    		icon: '', // 按钮图标
	},
	header: { // 可选触摸头部
        trigger: '', // 触发事件后服务器 ws 发过来的标识符,
    },
	body: { // 可选触摸身体
        trigger: '', // 触发事件后服务器 ws 发过来的标识符,
    },
}

注册服务端响应

成功

{
    status: 200,
    message: 'ok',
    type: '',
    type: 'register'
}

失败

{
    status: 403,
    message: '', // 可能情况 1.需要用户在 live2D 控制面板打开这项功能
    type: 'register'
}

事件通知服务器响应

{
    code: 200,
    type: 'notice',
    trigger: '' // 标识符
}

发送信息

{
    code: '', // 注册时候code值
    type: 'message',
    message: '',
    duration: '2000'// 毫秒(ms) 默认 2000
}

心跳包（未实现）

服务端每 30 秒向客户端发送一个心跳包

{
    type:'heart',
    message: ''
}

死亡包

客户端

{
    code: '', // 注册时候code值
    type: 'death'
}

live2d端

如果用户自己关闭 live2d 将自动发送这个包

{
   type: 'death'
}

注意websocket的资源释放

异常

{
   type: 'err',
   message: '' //信息 连接已经挂了，请重新申请
}

xiaou

文档下载
 图标下载1.0.0

xiaou

可自己定制功能

xiaou

这个插件开源，过段时间，准备准备代码开源，因为我技术不够可能不能对live2d优化好有大佬可以带带我使用的最新的web的live2d

xiaou

模型仓库GitHub

xiaou

开源地址
插件源码
 live2d修改

何朴尧

xiaou
下载源码，将plugin.json 文件导入utools后似乎不能使用

六号加油机

好兄弟，加油加油

jieran233

dalao求个壁纸

xiaou

jieran233 可以搭配便民工具插件中的acg壁纸模块使用

kiss_me

怎么把扩展添加进去，我还是新手，大佬能教教不。。。

xiaou

kiss_me 那我等一下出个教程代码

xiaou

kiss_me 已经更新教程了

路漫漫

这个厉害了，连live2d都用上了

xiaou

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: '&#xe631;' // 按钮图标
          },
          btn2: { // 可选按钮二
            trigger: 'xiaou2', // 触发事件后服务器 ws 发过来的标识符,
            icon: '&#xe60e;' // 按钮图标
          },
          btn3: { // 可选按钮三
            trigger: 'xiaou3', // 触发事件后服务器 ws 发过来的标识符,
            icon: '&#xe671;' // 按钮图标
  }
};

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

其他都差不多

xiaou

喜欢代码高亮点击