Test_Project_Cocos/cocos-creator-multiplayer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

session and cookie examples

Browse Source
This commit is contained in:
King Wang
2021-06-11 17:46:26 +08:00
parent 69dd082dc8
commit 5af32e67ba
33 changed files with 975 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/session-and-cookie/frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
.DS_STORE
node_modules
dist

21
examples/session-and-cookie/frontend/package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "session-and-cookie-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "webpack serve --mode=development --open",
"build": "webpack --mode=production"
},
"devDependencies": {
"copy-webpack-plugin": "^9.0.0",
"html-webpack-plugin": "^5.3.1",
"ts-loader": "^9.2.3",
"typescript": "^4.3.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"tsrpc-browser": "^3.0.0-dev.15"
}
}

0
examples/session-and-cookie/frontend/public/favicon.ico Normal file
View File

46
examples/session-and-cookie/frontend/public/index.css Normal file
View File

@@ -0,0 +1,46 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
body>* {
margin: 20px auto;
}
.buttons {
width: 450px;
font-size: 0px;
}
.buttons>button {
display: inline-block;
font-size: 16px;
margin: 10px;
padding: 20px;
width: calc(50% - 20px);
background: #3178c6;
color: #fff;
cursor: pointer;
border-radius: 4px;
border: none;
}
.buttons>button:hover {
background: #5ea8e9;
}
pre {
background: #333;
width: 450px;
padding: 20px;
min-height: 100px;
font-size: 14px;
color: #fff;
text-align: left;
border-radius: 4px;
}

29
examples/session-and-cookie/frontend/public/index.html Normal file
View File

@@ -0,0 +1,29 @@
<!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 Example</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Session and Cookie</h1>
<div class="buttons">
<button id="btnTest">Test</button>
<button id="btnClear">Clear</button>
<button id="btnGetSession">Get Session</button>
<button id="btnGetCookie">Get Cookie</button>
</div>
<h2>API Request</h2>
<pre class="apiReq"></pre>
<h2>API Return</h2>
<pre class="apiReturn"></pre>
</body>
</html>

31
examples/session-and-cookie/frontend/src/index.ts Normal file
View File

@@ -0,0 +1,31 @@
import { HttpClient } from 'tsrpc-browser';
import { enableSessionAndCookie } from './models/enableSessionAndCookie';
import { showReqAndRes } from './models/showReqAndRes';
import { serviceProto } from './shared/protocols/serviceProto';
// Create Client
let client = new HttpClient(serviceProto, {
server: 'http://127.0.0.1:3000',
logger: console
});
// Session and Cookie
enableSessionAndCookie(client);
// Show Req and Return to View
showReqAndRes(client);
// Bind Events
const $ = document.querySelector.bind(document) as (v: string) => HTMLElement;
$('#btnTest').onclick = () => {
client.callApi('Test', {});
};
$('#btnClear').onclick = () => {
client.callApi('Clear', {});
};
$('#btnGetCookie').onclick = () => {
client.callApi('GetCookie', {});
};
$('#btnGetSession').onclick = () => {
client.callApi('GetSession', {});
};

35
examples/session-and-cookie/frontend/src/models/enableSessionAndCookie.ts Normal file
View File

@@ -0,0 +1,35 @@
import { HttpClient } from "tsrpc-browser";
const CookieStorageKey = '__MY_COOKIE__';
const SessionStorageKey = '__MY_SESSION__';
export function enableSessionAndCookie(client: HttpClient<any>) {
// Send
client.flows.preCallApiFlow.push(v => {
// Auto get __cookie from localStorage
let cookieStr = localStorage.getItem(CookieStorageKey);
v.req.__cookie = cookieStr ? JSON.parse(cookieStr) : undefined;
// Auto get __session from sessionStorage
let sessionStr = sessionStorage.getItem(SessionStorageKey);
v.req.__session = sessionStr ? JSON.parse(sessionStr) : undefined;
return v;
})
// Return
client.flows.preApiReturnFlow.push(v => {
if (v.return.isSucc) {
// Auto set __cookie to localStorage
if (v.return.res.__cookie) {
localStorage.setItem(CookieStorageKey, JSON.stringify(v.return.res.__cookie))
}
// Auto set __session to sessionStorage
if (v.return.res.__session) {
sessionStorage.setItem(SessionStorageKey, JSON.stringify(v.return.res.__session))
}
}
return v;
})
}

10
examples/session-and-cookie/frontend/src/models/showReqAndRes.ts Normal file
View File

@@ -0,0 +1,10 @@
import { HttpClient } from "tsrpc-browser";
export function showReqAndRes(client: HttpClient<any>) {
// Send
client.flows.postApiReturnFlow.push(v => {
(document.querySelector('.apiReq') as HTMLElement).innerText = 'callApi: ' + v.apiName + '\n\n' + JSON.stringify(v.req, null, 2);
(document.querySelector('.apiReturn') as HTMLElement).innerText = JSON.stringify(v.return, null, 2);
return v;
});
}

9
examples/session-and-cookie/frontend/src/shared/protocols/PtlClear.ts Normal file
View File

@@ -0,0 +1,9 @@
import { BaseRequest, BaseResponse } from './base';
export interface ReqClear extends BaseRequest {
}
export interface ResClear extends BaseResponse {
}

9
examples/session-and-cookie/frontend/src/shared/protocols/PtlGetCookie.ts Normal file
View File

@@ -0,0 +1,9 @@
import { BaseRequest, BaseResponse } from './base'
export interface ReqGetCookie extends BaseRequest {
}
export interface ResGetCookie extends BaseResponse {
}

9
examples/session-and-cookie/frontend/src/shared/protocols/PtlGetSession.ts Normal file
View File

@@ -0,0 +1,9 @@
import { BaseRequest, BaseResponse } from './base'
export interface ReqGetSession extends BaseRequest {
}
export interface ResGetSession extends BaseResponse {
}

9
examples/session-and-cookie/frontend/src/shared/protocols/PtlTest.ts Normal file
View File

@@ -0,0 +1,9 @@
import { BaseRequest, BaseResponse } from './base'
export interface ReqTest extends BaseRequest {
}
export interface ResTest extends BaseResponse {
}

9
examples/session-and-cookie/frontend/src/shared/protocols/base.ts Normal file
View File

@@ -0,0 +1,9 @@
export interface BaseRequest {
__session?: { [key: string]: any };
__cookie?: { [key: string]: any };
}
export interface BaseResponse {
__session?: { [key: string]: any };
__cookie?: { [key: string]: any };
}

219
examples/session-and-cookie/frontend/src/shared/protocols/serviceProto.ts Normal file
View File

@@ -0,0 +1,219 @@
import { ServiceProto } from 'tsrpc-proto';
import { ReqClear, ResClear } from './PtlClear';
import { ReqGetCookie, ResGetCookie } from './PtlGetCookie';
import { ReqGetSession, ResGetSession } from './PtlGetSession';
import { ReqTest, ResTest } from './PtlTest';
export interface ServiceType {
api: {
"Clear": {
req: ReqClear,
res: ResClear
},
"GetCookie": {
req: ReqGetCookie,
res: ResGetCookie
},
"GetSession": {
req: ReqGetSession,
res: ResGetSession
},
"Test": {
req: ReqTest,
res: ResTest
}
},
msg: {
}
}
export const serviceProto: ServiceProto<ServiceType> = {
"version": 3,
"services": [
{
"id": 3,
"name": "Clear",
"type": "api"
},
{
"id": 0,
"name": "GetCookie",
"type": "api"
},
{
"id": 1,
"name": "GetSession",
"type": "api"
},
{
"id": 2,
"name": "Test",
"type": "api"
}
],
"types": {
"PtlClear/ReqClear": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseRequest"
}
}
]
},
"base/BaseRequest": {
"type": "Interface",
"properties": [
{
"id": 0,
"name": "__session",
"type": {
"type": "Interface",
"indexSignature": {
"keyType": "String",
"type": {
"type": "Any"
}
}
},
"optional": true
},
{
"id": 1,
"name": "__cookie",
"type": {
"type": "Interface",
"indexSignature": {
"keyType": "String",
"type": {
"type": "Any"
}
}
},
"optional": true
}
]
},
"PtlClear/ResClear": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseResponse"
}
}
]
},
"base/BaseResponse": {
"type": "Interface",
"properties": [
{
"id": 0,
"name": "__session",
"type": {
"type": "Interface",
"indexSignature": {
"keyType": "String",
"type": {
"type": "Any"
}
}
},
"optional": true
},
{
"id": 1,
"name": "__cookie",
"type": {
"type": "Interface",
"indexSignature": {
"keyType": "String",
"type": {
"type": "Any"
}
}
},
"optional": true
}
]
},
"PtlGetCookie/ReqGetCookie": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseRequest"
}
}
]
},
"PtlGetCookie/ResGetCookie": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseResponse"
}
}
]
},
"PtlGetSession/ReqGetSession": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseRequest"
}
}
]
},
"PtlGetSession/ResGetSession": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseResponse"
}
}
]
},
"PtlTest/ReqTest": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseRequest"
}
}
]
},
"PtlTest/ResTest": {
"type": "Interface",
"extends": [
{
"id": 0,
"type": {
"type": "Reference",
"target": "base/BaseResponse"
}
}
]
}
}
};

23
examples/session-and-cookie/frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,23 @@
{
"compilerOptions": {
"lib": [
"dom",
"es2018"
],
"module": "esnext",
"target": "es2018",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"outDir": "dist",
"skipLibCheck": true,
"strict": true,
"jsx": "react-jsx",
"sourceMap": true,
"isolatedModules": true
},
"include": [
"src"
]
}

58
examples/session-and-cookie/frontend/webpack.config.js Normal file
View File

@@ -0,0 +1,58 @@
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']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [{
loader: 'ts-loader',
options: {
compilerOptions: isProduction ? {
"lib": [
"dom",
"es2015.promise"
],
"target": "es5",
} : 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'
}