JBolt Admin Vue

Appearance

WebSocket相关 ​

获取 WebSocket实例 ​

js
import { useWebsocket } from '@/composables'
const socket = useWebsocket()
import { useWebsocket } from '@/composables'
const socket = useWebsocket()

WebSocket实例会在用户登录后自动初始化，并连接到服务器。

发送消息到服务器端 ​

sendCommand 发送指令消息到服务器 ​

接口定义

ts
function sendCommand(command: string, data?: any, to: string = "-1") : void
function sendCommand(command: string, data?: any, to: string = "-1") : void
参数类型说明
commandstring自定义的指令，例如check-interval、pull-info
dataany随指令发给服务器的数据
tostring发送给谁，-1代表系统，一般不用更改

sendText 发送文本消息到服务器 ​

接口定义

ts
function sendText(data: string, to: string = '-1') : void
function sendText(data: string, to: string = '-1') : void
参数类型说明
datastring要发送的文本数据
tostring发送给谁，-1代表系统，一般不用更改。如果要发送给指定人，可以传入用户的userId，如何解析由后端自己处理

处理服务器端推送过来的消息 ​

在src/composables/websocket目录下，提供了两个文件：

  • extend_command_handler.ts 处理服务器端发送过来的自定义指令消息
  • extend_text_handler.ts 处理服务器端发送过来的文本消息

所有的处理逻辑，在这两个文件中进行扩展即可。

extend_command_handler.ts ​

这个文件中导出了一个默认对象，对象的key，就是服务器端发过来的指令，value就是对应的回调函数。回调函数会接收一个 res 参数，对应服务器端发送过来的数据。示例代码如下：

ts
export default {
    demo: function (res: any) {
        console.debug('接收到demo指令和数据：', res)
    }
}
export default {
    demo: function (res: any) {
        console.debug('接收到demo指令和数据：', res)
    }
}

extend_text_handler.ts ​

这个文件中导出了一个默认对象,里面有一个process函数，服务器端推送文本消息到前端后，就会调用该函数，所以相关处理逻辑在这个函数内自行实现即可。该函数会接收一个 res 参数，对应服务器端发送过来的文本数据。示例代码如下：

ts
export default {
    /**
     * 核心方法处理文本消息返回事件
     * @param res
     */
    process: (res: string) => {
        //有特殊需求处理在这里
        console.debug('接收到文本消息：', res)
    }
}
export default {
    /**
     * 核心方法处理文本消息返回事件
     * @param res
     */
    process: (res: string) => {
        //有特殊需求处理在这里
        console.debug('接收到文本消息：', res)
    }
}