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

chatroom

Browse Source
This commit is contained in:
King Wang
2021-06-11 16:34:18 +08:00
parent edca2a9bba
commit 69dd082dc8
23 changed files with 683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/chatroom/frontend/.gitignore vendored Normal file
View File

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

21
examples/chatroom/frontend/package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "chatroom-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/chatroom/frontend/public/favicon.ico Normal file
View File

100
examples/chatroom/frontend/public/index.css Normal file
View File

@@ -0,0 +1,100 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body>h1 {
text-align: center;
margin-top: 20px;
}
.app {
display: flex;
justify-content: center;
}
.chat-room {
display: flex;
flex-direction: column;
width: 460px;
height: 480px;
margin: 20px;
background: #f7f7f7;
border: 1px solid #454545;
border-radius: 5px;
overflow: hidden;
}
.chat-room>header {
background: #454545;
color: white;
text-align: center;
padding: 10px;
}
.send {
flex: 0 0 40px;
display: flex;
border-top: 1px solid #454545;
}
.send>* {
border: none;
outline: none;
height: 100%;
font-size: 16px;
}
.send>input {
flex: 1;
background: #fff;
padding: 0 10px;
}
.send>button {
flex: 0 0 100px;
background: #215fa4;
color: white;
cursor: pointer;
}
.send>button:hover {
background: #4b80bb;
}
.list {
flex: 1;
overflow-y: auto;
list-style: none;
border-radius: 5px;
padding: 10px;
padding-bottom: 20px;
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;
}

37
examples/chatroom/frontend/public/index.html Normal file
View File

@@ -0,0 +1,37 @@
<!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 Chatroom</h1>
<div class="app">
<div class="chat-room">
<header>Client #1</header>
<ul class="list"></ul>
<div class="send">
<input placeholder="Say something..." />
<button>Send</button>
</div>
</div>
<div class="chat-room">
<header>Client #2</header>
<ul class="list"></ul>
<div class="send">
<input placeholder="Say something..." />
<button>Send</button>
</div>
</div>
</div>
</body>
</html>

101
examples/chatroom/frontend/src/Chatroom.ts Normal file
View File

@@ -0,0 +1,101 @@
import { WsClient } from "tsrpc-browser";
import { MsgChat } from "./shared/protocols/MsgChat";
import { serviceProto } from './shared/protocols/serviceProto';
export interface ChatroomProps {
title: string;
}
export class Chatroom {
elem: HTMLDivElement;
props: ChatroomProps;
input: HTMLInputElement;
list: HTMLUListElement;
header: HTMLElement;
client = new WsClient(serviceProto, {
server: 'ws://127.0.0.1:3000',
logger: console
})
constructor(elem: HTMLDivElement, props: ChatroomProps) {
this.elem = elem;
this.props = props;
this.elem.innerHTML = `
<header></header>
<ul class="list"></ul>
<div class="send">
<input placeholder="Say something..." />
<button>Send</button>
</div>`;
this.input = this.elem.querySelector('.send>input')!;
this.list = this.elem.querySelector('ul.list')!;
this.header = this.elem.querySelector('header')!;
// Connect at startup
this.connect();
// Listen Msg
this.client.listenMsg('Chat', v => { this.onChatMsg(v) })
// Bind Event
this.elem.querySelector('button')!.onclick = () => { this.send() };
this.input.onkeypress = e => {
if (e.key === 'Enter') {
this.send();
}
}
// When disconnected
this.client.flows.postDisconnectFlow.push(v => {
// Retry after 2 seconds
this.header.innerText = `🔴 Disconnected`;
setTimeout(() => {
this.connect();
}, 2000)
return v;
})
}
async connect(): Promise<void> {
this.header.innerText = `🟡 Connecting...`;
let res = await this.client.connect();
if (!res.isSucc) {
this.header.innerText = `🔴 Disconnected`;
// Retry after 2 seconds
await new Promise(rs => { setTimeout(rs, 2000) });
await this.connect();
}
this.header.innerText = '🟢 ' + this.props.title;
}
async send() {
let ret = await this.client.callApi('Send', {
content: this.input.value
});
// Error
if (!ret.isSucc) {
alert(ret.err.message);
return;
}
// Success
this.input.value = '';
}
onChatMsg(msg: MsgChat) {
let li = document.createElement('li');
li.innerHTML = `<div class="content"></div><div class="time"></div>`;
(li.querySelector('.content') as HTMLDivElement).innerText = msg.content;
(li.querySelector('.time') as HTMLDivElement).innerText = msg.time.toLocaleTimeString();
this.list.appendChild(li);
this.list.scrollTo(0, this.list.scrollHeight);
}
}

9
examples/chatroom/frontend/src/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { Chatroom } from "./Chatroom";
document.querySelectorAll('.chat-room').forEach((v, i) => {
new Chatroom(v as HTMLDivElement, {
title: `Client #${i + 1}`
});
});
export { };

4
examples/chatroom/frontend/src/shared/protocols/MsgChat.ts Normal file
View File

@@ -0,0 +1,4 @@
export interface MsgChat {
content: string,
time: Date
}

7
examples/chatroom/frontend/src/shared/protocols/PtlSend.ts Normal file
View File

@@ -0,0 +1,7 @@
export interface ReqSend {
content: string
}
export interface ResSend {
time: Date
}

75
examples/chatroom/frontend/src/shared/protocols/serviceProto.ts Normal file
View File

@@ -0,0 +1,75 @@
import { ServiceProto } from 'tsrpc-proto';
import { MsgChat } from './MsgChat';
import { ReqSend, ResSend } from './PtlSend';
export interface ServiceType {
api: {
"Send": {
req: ReqSend,
res: ResSend
}
},
msg: {
"Chat": MsgChat
}
}
export const serviceProto: ServiceProto<ServiceType> = {
"services": [
{
"id": 0,
"name": "Chat",
"type": "msg"
},
{
"id": 1,
"name": "Send",
"type": "api"
}
],
"types": {
"MsgChat/MsgChat": {
"type": "Interface",
"properties": [
{
"id": 0,
"name": "content",
"type": {
"type": "String"
}
},
{
"id": 1,
"name": "time",
"type": {
"type": "Date"
}
}
]
},
"PtlSend/ReqSend": {
"type": "Interface",
"properties": [
{
"id": 0,
"name": "content",
"type": {
"type": "String"
}
}
]
},
"PtlSend/ResSend": {
"type": "Interface",
"properties": [
{
"id": 0,
"name": "time",
"type": {
"type": "Date"
}
}
]
}
}
};

23
examples/chatroom/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/chatroom/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'
}