Comments (9)
@livizy
这个警告仅是提示未配置 http 相关的 proxy, 可以忽略。
在 apifox 中, 建立 连接 不能使用 ws://localhost:5173
,你应该使用 IP 进行连接。
在你启动 vite dev 时, 添加 --host
参数,就可以获取 IP 请求地址。
from vite-plugin-mock-dev-server.
- 在 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 请求前缀
}),
]
})
- 编写
*.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' }))
})
},
})
- 在 客户端代码中, 建立连接
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
文档
from vite-plugin-mock-dev-server.
server.proxy怎么配置?
我是用apifox测试的:ws://localhost:5173/ws-api/socket
from vite-plugin-mock-dev-server.
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
相关的 配置 冲突的部分 过滤排除。
from vite-plugin-mock-dev-server.
那server.proxy,到底改怎么办?
因为,不配置有提示:[vite:mock] No proxy was configured, mock server will not work. See https://vite-p
from vite-plugin-mock-dev-server.
请教一下,如何可以调试呢?
from vite-plugin-mock-dev-server.
请教一下,如何可以调试呢?
这个得看你自己的需求是怎么样的了, 一般来说,你可以在 mock 文件中 通过 setInterval
持续发送消息给客户端,记得调用 onCleanup
方法清除计时器即可。 插件内部已经对 文件 热更新做了适配,因此你对 ws mock 的 修改,一般不需要重新建立连接。
WebSocket Server 该怎么开发,mock 就怎么写即可。
由于 wss 比较灵活,很难界定 ws 连接过程中 发送消息的触发机制、频率、数据类型,因此只提供了一个 setup
方法,将过程都交给 开发者自行控制。
from vite-plugin-mock-dev-server.
我指的是,如何在这个setup中下断点调试。
from vite-plugin-mock-dev-server.
emmm... 🤔
其实这个插件是依托于 vite 的, 而 vite 是在 nodejs 环境中的, 即 nodejs 的 程序如何进行 断点调式,这个插件也同样如此,并无本质上的区别。 大多出时候使用 console.log
查看日志输出都可以满足需求,而且插件内部也做了 针对于 编译时的错误日志输出、运行时的错误日志输出,而且大部分错误都不会导致 服务中断停止,开发时的调试应该挺容易的。
from vite-plugin-mock-dev-server.
Related Issues (20)
- next() 无法将 POST 请求转交给 Vite 默认代理中间件 HOT 7
- 希望 `mockDevServerPlugin` 添加一个 `base_url` 配置 HOT 2
- 是否可以支持mock数据低优先级 HOT 10
- mockServer 独立部署安装和启动报错 HOT 3
- mockServer 正常启动,但是接口进 mockServer 服务后报错,和一些实验性建议 HOT 6
- 未配置 vite 的 proxy 参数和插件的 prefix 参数,应输出警告信息。 HOT 3
- "[ERROR] Invalid define value (must be an entity name or valid JSON syntax)"... when JSON object is the value HOT 6
- [bug:]Cannot start service: Host version "0.19.8" does not match binary version "0.18.17" HOT 3
- WebSocket mocking issues when ws request contains query params HOT 2
- [ERROR] The entry point "mock/table.ts.timestamp-1710847630001.mjs" cannot be marked as external
- 请求体过大报错 HOT 1
- 请问支持生产环境吗?有没有相关例子 HOT 1
- The CJS build of vite-plugin-mock-dev-server's Node API is deprecated HOT 2
- How to set a global mock config HOT 2
- 无法请求到数据 HOT 6
- 如何支持静态大文件的mock HOT 2
- 多个 vite 配置文件的情况下,server.proxy 配置后不生效 HOT 4
- 建议能够开发出一个支持 `Rspack` 和 `Rsbuild` 的插件 HOT 2
- 建议新增一个辅助开发调试的GUI功能 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-mock-dev-server.