websocket不成功

[livizy]

websocket不成功

[pengzhanbo]

@livizy
这个警告仅是提示未配置 http 相关的 proxy， 可以忽略。
在 apifox 中， 建立 连接 不能使用 ws://localhost:5173，你应该使用 IP 进行连接。

在你启动 vite dev 时， 添加 --host 参数，就可以获取 IP 请求地址。

[pengzhanbo]

1. 在 vite 中 引入 插件，并配置 wsPrefix

// vite.config.ts
import { defineConfig } from 'vite'
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'

export default defineConfig({
  plugins: [
    mockDevServerPlugin({
      wsPrefix: ['^/ws-api'], // 配置你的 websocket 请求前缀
    }),
  ]
})

2. 编写 *.mock.ts
   文档中有一个 聊天室的示例

// *.mock.ts  基础示例
import type { MockRequest } from 'vite-plugin-mock-dev-server'
import { defineMock } from 'vite-plugin-mock-dev-server'

export default defineMock({
  url: '/ws-api/socket',
  ws: true,   // 必须声明  ws 为 true
  setup(wss) {
    // 监听客户端发起的连接
    wss.on('connection', (ws, _req: MockRequest) => {
      // req.query
      // req.params
      // req.getCookie
      // 接收客户端消息
      ws.on('message', (raw) => {
        const message = JSON.parse(String(raw))

        console.log(message)
      })
      // 向客户端发送消息
      ws.send(JSON.stringify({ type: 'connected123' }))
    })
  },
})

3. 在 客户端代码中， 建立连接

const ws = new WebSocket('ws://localhost:5173/ws-api/socket')
ws.addEventListener('open', () => {
  // 连接建立成功， do something
})
ws.addEventListener('message', () => {
  // 接收来自服务端的消息， do something
})
ws.send('message') // 向服务端发送消息

---

在 *.mock.ts 配置中， setup(wss, { onCleanup }) {} 方法 用于配置 服务器端的 wss 行为。

其中， wss 是 WebSocketServer。 通过 connection 事件监听是否有 客户端发起 ws 连接，并在回调函数中获取 ws 实例 和 request 实例。

请查阅 ws文档

[livizy]

server.proxy怎么配置？

我是用apifox测试的：ws://localhost:5173/ws-api/socket

[pengzhanbo]

server.proxy怎么配置？

我是用apifox测试的：ws://localhost:5173/ws-api/socket

server.proxy 不需要额外的 ws 配置了。 因为 server.proxy[xxx].ws = true 和 插件内的 ws mock
都需要 使用 http server 的 upgrade 事件，会消费当前请求连接，导致产生冲突。因此，当配置了 插件的 wsPrefix 选项，插件内会检测 server.proxy 是否存在冲突，会将 server.proxy 中 ws 相关的 配置 冲突的部分 过滤排除。

[livizy]

那server.proxy，到底改怎么办？
因为，不配置有提示：[vite:mock] No proxy was configured, mock server will not work. See https://vite-p

[livizy]

请教一下，如何可以调试呢？

[pengzhanbo]

请教一下，如何可以调试呢？

这个得看你自己的需求是怎么样的了， 一般来说，你可以在 mock 文件中 通过 setInterval 持续发送消息给客户端，记得调用 onCleanup 方法清除计时器即可。 插件内部已经对 文件 热更新做了适配，因此你对 ws mock 的 修改，一般不需要重新建立连接。

WebSocket Server 该怎么开发，mock 就怎么写即可。

由于 wss 比较灵活，很难界定 ws 连接过程中 发送消息的触发机制、频率、数据类型，因此只提供了一个 setup 方法，将过程都交给 开发者自行控制。

[livizy]

我指的是，如何在这个setup中下断点调试。

[pengzhanbo]

emmm... 🤔
其实这个插件是依托于 vite 的， 而 vite 是在 nodejs 环境中的， 即 nodejs 的 程序如何进行 断点调式，这个插件也同样如此，并无本质上的区别。 大多出时候使用 console.log 查看日志输出都可以满足需求，而且插件内部也做了 针对于 编译时的错误日志输出、运行时的错误日志输出，而且大部分错误都不会导致 服务中断停止，开发时的调试应该挺容易的。