client-mock
This commit is contained in:
King Wang
3
examples/client-mock/frontend/.gitignore
vendored
Normal file
3
examples/client-mock/frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
.DS_STORE
|
||||
node_modules
|
||||
dist
|
||||
24
examples/client-mock/frontend/package.json
Normal file
24
examples/client-mock/frontend/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "client-mock-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack serve --mode=development --open",
|
||||
"build": "webpack --mode=production"
|
||||
},
|
||||
"devDependencies": {
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"html-webpack-plugin": "^5.3.2",
|
||||
"ts-loader": "^9.2.3",
|
||||
"typescript": "^4.3.4",
|
||||
"webpack": "^5.41.1",
|
||||
"webpack-cli": "^4.7.2",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"tsrpc-browser": "^3.0.4"
|
||||
},
|
||||
"browserslist": [
|
||||
"defaults"
|
||||
]
|
||||
}
|
||||
BIN
examples/client-mock/frontend/public/favicon.ico
Normal file
BIN
examples/client-mock/frontend/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
83
examples/client-mock/frontend/public/index.css
Normal file
83
examples/client-mock/frontend/public/index.css
Normal file
@@ -0,0 +1,83 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body>* {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.send,
|
||||
.list {
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
.send>* {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.send>textarea {
|
||||
height: 80px;
|
||||
background: #f7f7f7;
|
||||
border: #eeeeee 1px solid;
|
||||
}
|
||||
|
||||
.send>textarea:focus {
|
||||
background: #fff;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.send>button {
|
||||
background: #215fa4;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.send>button:hover {
|
||||
background: #4b80bb;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.list>li {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
line-height: 1.5em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.list>li>.content {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list>li>.time {
|
||||
font-size: 12px;
|
||||
color: #4b80bb;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.list>li:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
28
examples/client-mock/frontend/public/index.html
Normal file
28
examples/client-mock/frontend/public/index.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TSRPC Browser</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>TSRPC Guestbook</h1>
|
||||
|
||||
<div class="send">
|
||||
<textarea placeholder="Say something..."></textarea>
|
||||
<button>Send</button>
|
||||
</div>
|
||||
|
||||
<ul class="list">
|
||||
<!-- <li>
|
||||
<div class="content">Hello, World</div>
|
||||
<div class="time">11:23:23</div>
|
||||
</li> -->
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
100
examples/client-mock/frontend/src/index.ts
Normal file
100
examples/client-mock/frontend/src/index.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import { HttpClient, TsrpcError } from 'tsrpc-browser';
|
||||
import { serviceProto } from './shared/protocols/serviceProto';
|
||||
|
||||
// This is a demo code file
|
||||
// Feel free to modify or clear it
|
||||
|
||||
// Create Client
|
||||
let client = new HttpClient(serviceProto, {
|
||||
server: 'http://127.0.0.1:3000',
|
||||
logger: console
|
||||
});
|
||||
|
||||
// Mock 后端逻辑临时存储数据
|
||||
let data: {
|
||||
content: string,
|
||||
time: Date
|
||||
}[] = [];
|
||||
|
||||
// Client Mock
|
||||
client.flows.preCallApiFlow.push(v => {
|
||||
// 模拟网络错误：20% 网络错误概率
|
||||
if (Math.random() < 0.2) {
|
||||
// 模拟返回
|
||||
v.return = {
|
||||
isSucc: false,
|
||||
err: new TsrpcError('模拟网络错误: ' + v.apiName, {
|
||||
type: TsrpcError.Type.NetworkError
|
||||
})
|
||||
}
|
||||
return v;
|
||||
}
|
||||
|
||||
// 模拟后端逻辑， Mock 返回结果，实际不请求后端
|
||||
client.logger?.log('[MockReq]', v.apiName, v.req);
|
||||
if (v.apiName === 'AddData') {
|
||||
let time = new Date();
|
||||
data.unshift({ content: v.req.content, time: time })
|
||||
v.return = {
|
||||
isSucc: true,
|
||||
res: { time: time }
|
||||
}
|
||||
}
|
||||
else if (v.apiName === 'GetData') {
|
||||
v.return = {
|
||||
isSucc: true,
|
||||
res: {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
}
|
||||
client.logger?.log('[MockRes]', v.apiName, v.return);
|
||||
|
||||
return v;
|
||||
})
|
||||
|
||||
// Reload message list
|
||||
async function loadList() {
|
||||
let ret = await client.callApi('GetData', {});
|
||||
|
||||
// Error
|
||||
if (!ret.isSucc) {
|
||||
alert(ret.err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Success
|
||||
const list = document.querySelector('.list')!;
|
||||
list.innerHTML = '';
|
||||
ret.res.data.forEach(v => {
|
||||
let li = document.createElement('li');
|
||||
li.innerHTML = `<div class="content"></div><div class="time"></div>`;
|
||||
(li.querySelector('.content') as HTMLDivElement).innerText = v.content;
|
||||
(li.querySelector('.time') as HTMLDivElement).innerText = v.time.toLocaleTimeString();
|
||||
list.appendChild(li);
|
||||
})
|
||||
}
|
||||
|
||||
// Send Message
|
||||
async function send() {
|
||||
const textarea = document.querySelector('.send>textarea') as HTMLTextAreaElement;
|
||||
let ret = await client.callApi('AddData', {
|
||||
content: textarea.value
|
||||
});
|
||||
|
||||
// Error
|
||||
if (!ret.isSucc) {
|
||||
alert(ret.err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
// Success
|
||||
textarea.value = '';
|
||||
loadList();
|
||||
}
|
||||
|
||||
// Bind Events
|
||||
(document.querySelector('.send>button') as HTMLButtonElement).onclick = send;
|
||||
|
||||
// Load list after page load
|
||||
loadList();
|
||||
@@ -0,0 +1,10 @@
|
||||
// This is a demo code file
|
||||
// Feel free to delete it
|
||||
|
||||
export interface ReqAddData {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface ResAddData {
|
||||
time: Date
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
// This is a demo code file
|
||||
// Feel free to delete it
|
||||
|
||||
export interface ReqGetData {
|
||||
|
||||
}
|
||||
|
||||
export interface ResGetData {
|
||||
data: {
|
||||
content: string,
|
||||
time: Date
|
||||
}[]
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { ServiceProto } from 'tsrpc-proto';
|
||||
import { ReqAddData, ResAddData } from './PtlAddData';
|
||||
import { ReqGetData, ResGetData } from './PtlGetData';
|
||||
|
||||
// This is a demo service proto file (auto generated)
|
||||
// Feel free to delete it
|
||||
|
||||
export interface ServiceType {
|
||||
api: {
|
||||
"AddData": {
|
||||
req: ReqAddData,
|
||||
res: ResAddData
|
||||
},
|
||||
"GetData": {
|
||||
req: ReqGetData,
|
||||
res: ResGetData
|
||||
}
|
||||
},
|
||||
msg: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export const serviceProto: ServiceProto<ServiceType> = {
|
||||
"version": 1,
|
||||
"services": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "AddData",
|
||||
"type": "api"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "GetData",
|
||||
"type": "api"
|
||||
}
|
||||
],
|
||||
"types": {
|
||||
"PtlAddData/ReqAddData": {
|
||||
"type": "Interface",
|
||||
"properties": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "content",
|
||||
"type": {
|
||||
"type": "String"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlAddData/ResAddData": {
|
||||
"type": "Interface",
|
||||
"properties": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "time",
|
||||
"type": {
|
||||
"type": "Date"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"PtlGetData/ReqGetData": {
|
||||
"type": "Interface"
|
||||
},
|
||||
"PtlGetData/ResGetData": {
|
||||
"type": "Interface",
|
||||
"properties": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "data",
|
||||
"type": {
|
||||
"type": "Array",
|
||||
"elementType": {
|
||||
"type": "Interface",
|
||||
"properties": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "content",
|
||||
"type": {
|
||||
"type": "String"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"name": "time",
|
||||
"type": {
|
||||
"type": "Date"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
23
examples/client-mock/frontend/tsconfig.json
Normal file
23
examples/client-mock/frontend/tsconfig.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2015"
|
||||
],
|
||||
"module": "esnext",
|
||||
"target": "es5",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"moduleResolution": "node",
|
||||
"outDir": "dist",
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"jsx": "react-jsx",
|
||||
"sourceMap": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
56
examples/client-mock/frontend/webpack.config.js
Normal file
56
examples/client-mock/frontend/webpack.config.js
Normal file
@@ -0,0 +1,56 @@
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
|
||||
const isProduction = process.argv.indexOf('--mode=production') > -1;
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.ts',
|
||||
output: {
|
||||
filename: 'bundle.[contenthash].js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
clean: true
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.mjs', '.cjs']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: [{
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
// Compile to ES5 in production mode for better compatibility
|
||||
// Compile to ES2018 in development for better debugging (like async/await)
|
||||
compilerOptions: !isProduction ? {
|
||||
"target": "es2018",
|
||||
} : undefined
|
||||
}
|
||||
}],
|
||||
exclude: /node_modules/
|
||||
},
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
// Copy "public" to "dist"
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [{
|
||||
from: 'public',
|
||||
to: '.',
|
||||
toType: 'dir',
|
||||
globOptions: {
|
||||
gitignore: true,
|
||||
ignore: [path.resolve(__dirname, 'public/index.html').replace(/\\/g, '/')]
|
||||
},
|
||||
noErrorOnMissing: true
|
||||
}]
|
||||
}),
|
||||
// Auto add <script> to "index.html"
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'public/index.html'
|
||||
}),
|
||||
],
|
||||
devtool: isProduction ? false : 'inline-source-map'
|
||||
}
|
||||
Reference in New Issue
Block a user