feat:提交代码
This commit is contained in:
徐洲
commit
edc7fb6507
|
|
@ -0,0 +1,8 @@
|
||||||
|
# webstorm
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# mac
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# nodejs
|
||||||
|
node_modules
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2021 zhouxhere
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
|
||||||
|
parserOptions: {
|
||||||
|
parser: "babel-eslint",
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||||
|
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# client-vue
|
||||||
|
|
||||||
|
webrtc 客户端 vue 实现 client demo
|
||||||
|
|
||||||
|
问题：navigator.mediaDevices 需要在https下 （ localhost 除外）
|
||||||
|
|
||||||
|
1. 调试时可修改 vue.config.js 中 devServer https，但是后端也需要修改为 https
|
||||||
|
2. chrome 浏览器 设置 chrome://flags，Insecure origins treated as secure，启用填入ip即可
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: ["@vue/cli-plugin-babel/preset"],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
"import",
|
||||||
|
{
|
||||||
|
libraryName: "ant-design-vue",
|
||||||
|
libraryDirectory: "es",
|
||||||
|
style: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
],
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,44 @@
|
||||||
|
{
|
||||||
|
"name": "client-vue",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"ant-design-vue": "^1.7.7",
|
||||||
|
"babel-plugin-import": "^1.13.3",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"moment": "^2.29.1",
|
||||||
|
"socket.io-client": "^4.1.3",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-router": "^3.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-prettier": "^3.3.1",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"less": "^3.0.4",
|
||||||
|
"less-loader": "^5.0.0",
|
||||||
|
"lint-staged": "^9.5.0",
|
||||||
|
"prettier": "^2.2.1",
|
||||||
|
"vue-template-compiler": "^2.6.11"
|
||||||
|
},
|
||||||
|
"gitHooks": {
|
||||||
|
"pre-commit": "lint-staged"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{js,jsx,vue}": [
|
||||||
|
"vue-cli-service lint",
|
||||||
|
"git add"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<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">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<video ref="video" controls muted autoplay></video>
|
||||||
|
<p>{{ name }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "VideoCard",
|
||||||
|
props: {
|
||||||
|
srcObject: null,
|
||||||
|
name: null,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$refs.video.srcObject = this.srcObject;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.card {
|
||||||
|
width: 200px;
|
||||||
|
height: 160px;
|
||||||
|
background: #f3f3f3;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 6px;
|
||||||
|
|
||||||
|
> video {
|
||||||
|
width: 200px;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> p {
|
||||||
|
height: 20px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Col,
|
||||||
|
Input,
|
||||||
|
List,
|
||||||
|
Result,
|
||||||
|
Row,
|
||||||
|
} from "ant-design-vue";
|
||||||
|
import { Form } from "ant-design-vue";
|
||||||
|
import { Icon } from "ant-design-vue";
|
||||||
|
|
||||||
|
Vue.use(Button);
|
||||||
|
Vue.use(Form);
|
||||||
|
Vue.use(Icon);
|
||||||
|
Vue.use(Input);
|
||||||
|
Vue.use(Row);
|
||||||
|
Vue.use(Col);
|
||||||
|
Vue.use(List);
|
||||||
|
Vue.use(Avatar);
|
||||||
|
Vue.use(Card);
|
||||||
|
Vue.use(Result);
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
|
import "@/core/bootstrap";
|
||||||
|
|
||||||
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
render: (h) => h(App),
|
||||||
|
}).$mount("#app");
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import Vue from "vue";
|
||||||
|
import VueRouter from "vue-router";
|
||||||
|
import Home from "../views/Home.vue";
|
||||||
|
|
||||||
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
name: "Home",
|
||||||
|
component: Home,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "*",
|
||||||
|
redirect: "/",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: "history",
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
|
|
@ -0,0 +1,745 @@
|
||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<div class="home-header">
|
||||||
|
<template v-if="status === 'login'">
|
||||||
|
<a-input v-model="loginParams.name" placeholder="name" />
|
||||||
|
<a-input v-model="loginParams.unique" placeholder="unique" />
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
:disabled="!loginParams.name || !loginParams.unique"
|
||||||
|
@click="login"
|
||||||
|
>login</a-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="status === 'join'">
|
||||||
|
<a-input v-model="createParam" placeholder="create" />
|
||||||
|
<a-button type="primary" :disabled="!createParam" @click="create"
|
||||||
|
>create</a-button
|
||||||
|
>
|
||||||
|
<a-input v-model="joinParam" placeholder="join" />
|
||||||
|
<a-button type="primary" :disabled="!joinParam" @click="join"
|
||||||
|
>join</a-button
|
||||||
|
>
|
||||||
|
<a-button type="primary" @click="logout">logout</a-button>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="status === 'room' || status === 'chat'">
|
||||||
|
<p>{{ user.id }}</p>
|
||||||
|
<p>{{ user.name }}</p>
|
||||||
|
<p>{{ user.unique }}</p>
|
||||||
|
<p>{{ room.id }}</p>
|
||||||
|
<p>{{ room.name }}</p>
|
||||||
|
<a-button type="primary" @click="leave">leave</a-button>
|
||||||
|
<a-button type="primary" @click="logout">logout</a-button>
|
||||||
|
</template>
|
||||||
|
<template v-else> please login first</template>
|
||||||
|
</div>
|
||||||
|
<a-row
|
||||||
|
class="home-content"
|
||||||
|
:style="
|
||||||
|
status !== 'room' &&
|
||||||
|
status !== 'chat' &&
|
||||||
|
'align-items: center; justify-content: center'
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a-result
|
||||||
|
v-if="status !== 'room' && status !== 'chat'"
|
||||||
|
title="please login and create or join a room!"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<a-icon type="smile" theme="twoTone" />
|
||||||
|
</template>
|
||||||
|
</a-result>
|
||||||
|
<template v-else>
|
||||||
|
<a-col :span="4" class="home-content-user">
|
||||||
|
<a-list item-layout="horizontal" :data-source="users">
|
||||||
|
<a-list-item slot="renderItem" slot-scope="item">
|
||||||
|
<a-list-item-meta :description="item.unique">
|
||||||
|
<p slot="title">{{ item.name }}</p>
|
||||||
|
</a-list-item-meta>
|
||||||
|
</a-list-item>
|
||||||
|
</a-list>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12" class="home-content-message">
|
||||||
|
<a-list
|
||||||
|
item-layout="horizontal"
|
||||||
|
class="home-content-message-list"
|
||||||
|
:data-source="messages"
|
||||||
|
>
|
||||||
|
<a-list-item
|
||||||
|
slot-scope="msg"
|
||||||
|
:class="[
|
||||||
|
`home-content-message-list-${
|
||||||
|
msg.message.userId !== user.id ? 'left' : 'right'
|
||||||
|
}`,
|
||||||
|
]"
|
||||||
|
slot="renderItem"
|
||||||
|
>
|
||||||
|
<div class="home-content-message-list-user">
|
||||||
|
<p>{{ msg.user ? msg.user.name : "none" }}</p>
|
||||||
|
<span>{{ moment(msg.message.timestamp).format("HH:mm") }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="home-content-message-list-message">
|
||||||
|
{{ msg.message.content }}
|
||||||
|
</div>
|
||||||
|
</a-list-item>
|
||||||
|
</a-list>
|
||||||
|
<div class="home-content-message-input">
|
||||||
|
<a-textarea
|
||||||
|
class="home-content-message-input-textarea"
|
||||||
|
placeholder="发送消息"
|
||||||
|
v-model="message"
|
||||||
|
/>
|
||||||
|
<div class="home-content-message-input-btn">
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
:disabled="!Boolean(message)"
|
||||||
|
@click="send"
|
||||||
|
>发送</a-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8" class="home-content-chat">
|
||||||
|
<div class="home-content-chat-main">
|
||||||
|
<video-card
|
||||||
|
v-if="localStream"
|
||||||
|
:name="user.name"
|
||||||
|
:src-object="localStream"
|
||||||
|
/>
|
||||||
|
<a-result
|
||||||
|
title="leave chat"
|
||||||
|
class="home-content-chat-card"
|
||||||
|
v-if="localStream"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<!-- <a-icon type="smile" theme="twoTone" />-->
|
||||||
|
</template>
|
||||||
|
<template #extra>
|
||||||
|
<a-button type="primary" @click="leaveChat"> leave </a-button>
|
||||||
|
</template>
|
||||||
|
</a-result>
|
||||||
|
<a-result
|
||||||
|
v-if="!localStream"
|
||||||
|
title="join chat"
|
||||||
|
class="home-content-chat-card"
|
||||||
|
>
|
||||||
|
<template #icon>
|
||||||
|
<!-- <a-icon type="smile" theme="twoTone" />-->
|
||||||
|
</template>
|
||||||
|
<template #extra>
|
||||||
|
<a-button type="primary" @click="joinChat"> chat </a-button>
|
||||||
|
</template>
|
||||||
|
</a-result>
|
||||||
|
<video-card
|
||||||
|
v-for="chat in chats.filter((p) => p.stream)"
|
||||||
|
:key="chat.user.id"
|
||||||
|
:name="chat.user.name"
|
||||||
|
:src-object="chat.stream"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</template>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { io } from "socket.io-client";
|
||||||
|
import moment from "moment";
|
||||||
|
import VideoCard from "../components/VideoCard";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Home",
|
||||||
|
components: { VideoCard },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
status: null,
|
||||||
|
socket: null,
|
||||||
|
clientType: navigator.userAgent.match(
|
||||||
|
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
|
||||||
|
)
|
||||||
|
? "mobile"
|
||||||
|
: "pc",
|
||||||
|
loginParams: { name: null, unique: null },
|
||||||
|
createParam: null,
|
||||||
|
joinParam: null,
|
||||||
|
message: null,
|
||||||
|
users: [],
|
||||||
|
messages: [],
|
||||||
|
chats: [],
|
||||||
|
user: null,
|
||||||
|
client: null,
|
||||||
|
room: null,
|
||||||
|
localStream: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 页面刷新
|
||||||
|
window.addEventListener("beforeunload", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
if (this.socket) {
|
||||||
|
this.socket.emit("close", {
|
||||||
|
userId: this.user ? this.user.id : null,
|
||||||
|
roomId: this.room ? this.room.id : null,
|
||||||
|
clientType: this.clientType,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.socket = io("http://localhost:8000", {});
|
||||||
|
|
||||||
|
this.socket.on("connect", () => {
|
||||||
|
console.log("connect");
|
||||||
|
this.status = "login";
|
||||||
|
});
|
||||||
|
// 登录反馈
|
||||||
|
this.socket.on("login", (res) => {
|
||||||
|
console.log("login", res);
|
||||||
|
if (res.status === "success") {
|
||||||
|
this.user = res.data;
|
||||||
|
this.client = this.user.clients.find((p) => p.type === this.clientType);
|
||||||
|
sessionStorage.setItem("user", JSON.stringify(this.user));
|
||||||
|
this.status = "join";
|
||||||
|
|
||||||
|
if (sessionStorage.getItem("room")) {
|
||||||
|
let _room = JSON.parse(sessionStorage.getItem("room"));
|
||||||
|
this.joinParam = _room.id;
|
||||||
|
this.join();
|
||||||
|
}
|
||||||
|
} else if (res.status === "error") {
|
||||||
|
this.user = null;
|
||||||
|
this.status = "login";
|
||||||
|
}
|
||||||
|
this.loginParams = { name: null, unique: null };
|
||||||
|
});
|
||||||
|
// 登出反馈
|
||||||
|
this.socket.on("logout", (res) => {
|
||||||
|
console.log("logout", res);
|
||||||
|
sessionStorage.clear();
|
||||||
|
this.status = "login";
|
||||||
|
this.user = null;
|
||||||
|
this.client = null;
|
||||||
|
this.room = null;
|
||||||
|
this.users = [];
|
||||||
|
this.messages = [];
|
||||||
|
this.chats = [];
|
||||||
|
});
|
||||||
|
// 新建房间反馈
|
||||||
|
this.socket.on("create", (res) => {
|
||||||
|
console.log("create", res);
|
||||||
|
if (res.status === "success") {
|
||||||
|
this.room = res.data;
|
||||||
|
sessionStorage.setItem("room", JSON.stringify(this.room));
|
||||||
|
this.status = "room";
|
||||||
|
this.messages = this.room.messages.map((item) => {
|
||||||
|
let _user = this.users.find((p) => p.id === item.userId);
|
||||||
|
return {
|
||||||
|
user: _user,
|
||||||
|
message: item,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.users = this.room.member;
|
||||||
|
console.log(this.room.chats);
|
||||||
|
this.room.chats.forEach((item) => {
|
||||||
|
if (item.user.id === this.user.id) return;
|
||||||
|
let _chat = this.chats.find((p) => p.user.id === item.user.id);
|
||||||
|
if (_chat && _chat.user && _chat.client) {
|
||||||
|
if (_chat.client.socketId !== item.client.socketId) {
|
||||||
|
// change peerConnection
|
||||||
|
if (_chat.connection) {
|
||||||
|
_chat.connection.close();
|
||||||
|
_chat.connection = null;
|
||||||
|
}
|
||||||
|
_chat.stream = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// create peerConnection
|
||||||
|
_chat = {
|
||||||
|
user: item.user,
|
||||||
|
client: item.client,
|
||||||
|
connection: null,
|
||||||
|
options: item.options,
|
||||||
|
stream: null,
|
||||||
|
};
|
||||||
|
this.chats.push(_chat);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.createParam = null;
|
||||||
|
});
|
||||||
|
// 加入房间反馈
|
||||||
|
this.socket.on("join", (res) => {
|
||||||
|
console.log("join", res);
|
||||||
|
if (res.status === "success") {
|
||||||
|
this.joinParam = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 离开房间反馈
|
||||||
|
this.socket.on("leave", (res) => {
|
||||||
|
console.log("leave", res);
|
||||||
|
if (res.status === "success") {
|
||||||
|
this.status = "join";
|
||||||
|
this.room = null;
|
||||||
|
this.users = [];
|
||||||
|
this.messages = [];
|
||||||
|
this.chats = [];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 更新房间数据（users，messages，chats）
|
||||||
|
this.socket.on("room", (res) => {
|
||||||
|
console.log("room", res);
|
||||||
|
if (res.status === "success") {
|
||||||
|
this.room = res.data;
|
||||||
|
|
||||||
|
sessionStorage.setItem("room", JSON.stringify(this.room));
|
||||||
|
this.users = this.room.member;
|
||||||
|
this.messages = this.room.messages.map((item) => {
|
||||||
|
let _user = this.users.find((p) => p.id === item.userId);
|
||||||
|
return {
|
||||||
|
user: _user,
|
||||||
|
message: item,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
this.chats.forEach((item) => {
|
||||||
|
if (!this.room.chats.find((q) => q.user.id === item.user.id)) {
|
||||||
|
if (item.connection) {
|
||||||
|
item.connection.close();
|
||||||
|
item.connection = null;
|
||||||
|
item.stream = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.chats = this.chats.filter((p) =>
|
||||||
|
this.room.chats.find((q) => q.user.id === p.user.id)
|
||||||
|
);
|
||||||
|
|
||||||
|
this.room.chats.forEach((item) => {
|
||||||
|
if (item.user.id === this.user.id) return;
|
||||||
|
let _chat = this.chats.find((p) => p.user.id === item.user.id);
|
||||||
|
|
||||||
|
if (!_chat) {
|
||||||
|
_chat = {
|
||||||
|
user: item.user,
|
||||||
|
client: item.client,
|
||||||
|
connection: null,
|
||||||
|
options: item.options,
|
||||||
|
stream: null,
|
||||||
|
};
|
||||||
|
this.chats.push(_chat);
|
||||||
|
} else if (_chat.client.socketId !== item.client.socketId) {
|
||||||
|
// change peerConnection
|
||||||
|
if (_chat.connection) {
|
||||||
|
_chat.connection.close();
|
||||||
|
_chat.connection = null;
|
||||||
|
}
|
||||||
|
_chat.client = item.client;
|
||||||
|
_chat.user = item.user;
|
||||||
|
_chat.stream = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.localStream) {
|
||||||
|
this.chats.forEach((item) => {
|
||||||
|
if (this.localStream) {
|
||||||
|
if (!item.connection) {
|
||||||
|
this.register(item);
|
||||||
|
}
|
||||||
|
if (this.status === "chat") {
|
||||||
|
this.connect(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.status = "room";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 发送消息反馈
|
||||||
|
this.socket.on("message", (res) => {
|
||||||
|
console.log("message", res);
|
||||||
|
if (res.status === "success") {
|
||||||
|
this.message = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 加入聊天（media）反馈
|
||||||
|
this.socket.on("join_chat", (res) => {
|
||||||
|
console.log("join_chat", res);
|
||||||
|
this.status = "chat";
|
||||||
|
});
|
||||||
|
// 离开聊天（media）反馈
|
||||||
|
this.socket.on("leave_chat", (res) => {
|
||||||
|
console.log("leave_chat", res);
|
||||||
|
this.status = "room";
|
||||||
|
this.chats = [];
|
||||||
|
});
|
||||||
|
// webrtc
|
||||||
|
this.socket.on("chat", (res) => {
|
||||||
|
console.log("chat", res);
|
||||||
|
if (res.status === "success") {
|
||||||
|
let _chat = this.chats.find((p) => p.client.socketId === res.data.from);
|
||||||
|
if (!_chat) return;
|
||||||
|
if (res.data.sdp) {
|
||||||
|
if (res.data.sdp.type === "offer") {
|
||||||
|
_chat.connection
|
||||||
|
.setRemoteDescription(res.data.sdp)
|
||||||
|
.then(() => {
|
||||||
|
return _chat.connection.createAnswer();
|
||||||
|
})
|
||||||
|
.then((answer) => {
|
||||||
|
return _chat.connection.setLocalDescription(answer);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.p2p(
|
||||||
|
res.data.from,
|
||||||
|
_chat.connection.localDescription,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
_chat.connection.setRemoteDescription(res.data.sdp);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
res.data.candidate &&
|
||||||
|
_chat.connection.remoteDescription &&
|
||||||
|
_chat.connection.remoteDescription.type
|
||||||
|
) {
|
||||||
|
_chat.connection.addIceCandidate(res.data.candidate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 断开连接
|
||||||
|
this.socket.on("disconnect", () => {
|
||||||
|
console.log("disconnect");
|
||||||
|
this.user = null;
|
||||||
|
this.client = null;
|
||||||
|
this.room = null;
|
||||||
|
this.users = [];
|
||||||
|
this.messages = [];
|
||||||
|
this.chats = [];
|
||||||
|
this.status = null;
|
||||||
|
this.socket = null;
|
||||||
|
this.localStream = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (sessionStorage.getItem("user")) {
|
||||||
|
let _user = JSON.parse(sessionStorage.getItem("user"));
|
||||||
|
this.loginParams = { name: _user.name, unique: _user.unique };
|
||||||
|
this.login();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 登录
|
||||||
|
*/
|
||||||
|
login() {
|
||||||
|
this.socket.emit("login", {
|
||||||
|
...this.loginParams,
|
||||||
|
clientType: this.clientType,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 登出
|
||||||
|
*/
|
||||||
|
logout() {
|
||||||
|
this.socket.emit("logout", {
|
||||||
|
userId: this.user.id,
|
||||||
|
roomId: this.room ? this.room.id : null,
|
||||||
|
clientType: this.clientType,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 新建房间
|
||||||
|
*/
|
||||||
|
create() {
|
||||||
|
this.socket.emit("create", {
|
||||||
|
userId: this.user.id,
|
||||||
|
roomName: this.createParam,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 加入房间
|
||||||
|
*/
|
||||||
|
join() {
|
||||||
|
this.socket.emit("join", {
|
||||||
|
userId: this.user.id,
|
||||||
|
roomId: this.joinParam,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 离开房间
|
||||||
|
*/
|
||||||
|
leave() {
|
||||||
|
this.socket.emit("leave", { userId: this.user.id, roomId: this.room.id });
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 发送消息
|
||||||
|
*/
|
||||||
|
send() {
|
||||||
|
this.socket.emit("message", {
|
||||||
|
userId: this.user.id,
|
||||||
|
roomId: this.room.id,
|
||||||
|
content: this.message,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 加入聊天（media）
|
||||||
|
*/
|
||||||
|
joinChat() {
|
||||||
|
navigator.mediaDevices
|
||||||
|
.getUserMedia({
|
||||||
|
audio: true,
|
||||||
|
video: {
|
||||||
|
width: { min: 1024, ideal: 1280, max: 1920 },
|
||||||
|
height: { min: 576, ideal: 720, max: 1080 },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((stream) => {
|
||||||
|
this.localStream = stream;
|
||||||
|
})
|
||||||
|
// .then(() => {
|
||||||
|
// this.$refs.local.srcObject = this.localStream;
|
||||||
|
// })
|
||||||
|
.then(() => {
|
||||||
|
this.socket.emit("join_chat", {
|
||||||
|
userId: this.user.id,
|
||||||
|
roomId: this.room.id,
|
||||||
|
clientType: this.clientType,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 离开聊天（media）
|
||||||
|
*/
|
||||||
|
leaveChat() {
|
||||||
|
this.localStream.getTracks().forEach(function (track) {
|
||||||
|
if (track.readyState === "live") {
|
||||||
|
track.stop();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.localStream = null;
|
||||||
|
this.socket.emit("leave_chat", {
|
||||||
|
userId: this.user.id,
|
||||||
|
roomId: this.room.id,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* webrtc
|
||||||
|
*/
|
||||||
|
p2p(to, sdp, candidate) {
|
||||||
|
this.socket.emit("chat", {
|
||||||
|
from: this.socket.id,
|
||||||
|
to: to,
|
||||||
|
sdp: sdp,
|
||||||
|
candidate: candidate,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 注册 peerConnection
|
||||||
|
*/
|
||||||
|
register(param) {
|
||||||
|
param.connection = new RTCPeerConnection();
|
||||||
|
this.localStream.getTracks().forEach((track) => {
|
||||||
|
param.connection.addTrack(track, this.localStream);
|
||||||
|
});
|
||||||
|
param.connection.ontrack = (event) => {
|
||||||
|
if (event.streams.length > 0) {
|
||||||
|
if (param.stream !== event.streams[0]) {
|
||||||
|
param.stream = event.streams[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
param.connection.onicecandidate = (event) => {
|
||||||
|
if (event.candidate) {
|
||||||
|
this.p2p(param.client.socketId, null, event.candidate);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 发起 p2p 连接
|
||||||
|
*/
|
||||||
|
connect(param) {
|
||||||
|
param.connection
|
||||||
|
.createOffer()
|
||||||
|
.then((offer) => {
|
||||||
|
if (param.connection.signalingState !== "stable")
|
||||||
|
return Promise.reject(
|
||||||
|
`connection state is ${param.connection.signalingState}`
|
||||||
|
);
|
||||||
|
return param.connection.setLocalDescription(offer);
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.p2p(
|
||||||
|
param.client.socketId,
|
||||||
|
param.connection.localDescription,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
moment,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.home {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&-header {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
> input {
|
||||||
|
min-width: 120px;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&-user,
|
||||||
|
&-message,
|
||||||
|
&-chat {
|
||||||
|
border: 1px solid #ebedf0;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-user,
|
||||||
|
&-chat {
|
||||||
|
overflow: hidden scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-message {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&-list {
|
||||||
|
flex: 4 1 auto;
|
||||||
|
background: #f3f3f3;
|
||||||
|
border-bottom: 1px solid #ebedf0;
|
||||||
|
overflow: hidden scroll;
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
> p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 6px 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-message {
|
||||||
|
border: 1px solid #b7eb8f;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #f6ffed;
|
||||||
|
padding: 6px 12px;
|
||||||
|
min-height: 33px;
|
||||||
|
margin-right: 6px;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-input {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
> textarea {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-btn {
|
||||||
|
flex: 0 1 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-chat {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
//width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&-main {
|
||||||
|
width: 100%;
|
||||||
|
//height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-card {
|
||||||
|
width: 200px;
|
||||||
|
height: 160px;
|
||||||
|
background: #f3f3f3;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 6px;
|
||||||
|
|
||||||
|
> video {
|
||||||
|
width: 200px;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> p {
|
||||||
|
height: 20px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
module.exports = {
|
||||||
|
devServer: {
|
||||||
|
https: false,
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
loaderOptions: {
|
||||||
|
less: {
|
||||||
|
javascriptEnabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
配合实现 webrtc 的 nodejs server demo
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
采用http，若采用https，需要自行修改
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { v4 } from 'uuid'
|
||||||
|
|
||||||
|
export class Client {
|
||||||
|
id: string
|
||||||
|
socketId: string
|
||||||
|
type: string
|
||||||
|
status: string
|
||||||
|
|
||||||
|
constructor(socketId: string, type: string, status: string) {
|
||||||
|
this.id = v4()
|
||||||
|
this.socketId = socketId
|
||||||
|
this.type = type;
|
||||||
|
this.status = status;
|
||||||
|
}
|
||||||
|
|
||||||
|
login(socketId: string) {
|
||||||
|
this.socketId = socketId
|
||||||
|
this.status = 'online'
|
||||||
|
}
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
this.socketId = ""
|
||||||
|
this.status = 'offline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import {v4} from "uuid";
|
||||||
|
|
||||||
|
export class Message {
|
||||||
|
id: string
|
||||||
|
userId: string
|
||||||
|
content: string
|
||||||
|
timestamp: number
|
||||||
|
|
||||||
|
|
||||||
|
constructor(userId: string, content: string) {
|
||||||
|
this.userId = userId;
|
||||||
|
this.content = content;
|
||||||
|
this.id = v4()
|
||||||
|
this.timestamp = new Date().valueOf()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import {User} from "./User";
|
||||||
|
import {v4} from "uuid";
|
||||||
|
import {Message} from "./Message";
|
||||||
|
import {Client} from "./Client";
|
||||||
|
|
||||||
|
export class Room {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
admin: User
|
||||||
|
member: Array<User>
|
||||||
|
messages: Array<Message>
|
||||||
|
chats: Array<any>
|
||||||
|
|
||||||
|
constructor(name: string, admin: User) {
|
||||||
|
this.id = v4()
|
||||||
|
this.name = name
|
||||||
|
this.admin = admin
|
||||||
|
this.member = []
|
||||||
|
this.messages = []
|
||||||
|
this.chats = []
|
||||||
|
this.join(this.admin)
|
||||||
|
}
|
||||||
|
|
||||||
|
isIn(user: User): boolean {
|
||||||
|
let _index = this.member.findIndex(p => p.id === user.id)
|
||||||
|
return _index >= 0
|
||||||
|
}
|
||||||
|
|
||||||
|
join(user: User) {
|
||||||
|
let _index = this.member.findIndex(p => p.id === user.id)
|
||||||
|
if (_index < 0) {
|
||||||
|
this.member.push(user)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
leave(user: User) {
|
||||||
|
let _index = this.member.findIndex(p => p.id === user.id)
|
||||||
|
if (_index >= 0) {
|
||||||
|
this.member.splice(_index, 1)
|
||||||
|
}
|
||||||
|
this.close(user)
|
||||||
|
}
|
||||||
|
|
||||||
|
chown(admin: User, user: User) {
|
||||||
|
if (admin.id !== this.admin.id) throw new Error('no permission to change owner')
|
||||||
|
let _index = this.member.findIndex(p => p.id === user.id)
|
||||||
|
if (_index <= 0) throw new Error('not in the room')
|
||||||
|
this.admin = user
|
||||||
|
}
|
||||||
|
|
||||||
|
open(user: User, client: Client, options: any) {
|
||||||
|
let _index = this.chats.findIndex(p => p.user.id === user.id)
|
||||||
|
if (_index < 0) {
|
||||||
|
this.chats.push({user: user, client: client, options: options})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
close(user: User) {
|
||||||
|
let _index = this.chats.findIndex(p => p.user.id === user.id)
|
||||||
|
if (_index >= 0) {
|
||||||
|
this.chats.splice(_index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { v4 } from 'uuid'
|
||||||
|
import { Client } from './Client'
|
||||||
|
|
||||||
|
export class User {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
unique: string
|
||||||
|
status: string
|
||||||
|
clients: Array<Client>
|
||||||
|
|
||||||
|
constructor(name: string, unique: string, socketId: string, clientType: string) {
|
||||||
|
this.id = v4()
|
||||||
|
this.name = name
|
||||||
|
this.unique = unique
|
||||||
|
this.status = ''
|
||||||
|
this.clients = []
|
||||||
|
this.login(socketId, clientType)
|
||||||
|
}
|
||||||
|
|
||||||
|
login(socketId: string, clientType: string) {
|
||||||
|
this.status = 'online'
|
||||||
|
let _client = this.clients.find(p => p.type === clientType)
|
||||||
|
if (_client) {
|
||||||
|
_client.login(socketId)
|
||||||
|
} else {
|
||||||
|
_client = new Client(socketId, clientType, 'online')
|
||||||
|
this.clients.push(_client)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
logout(clientType: string) {
|
||||||
|
// this.status = 'offline'
|
||||||
|
let _client = this.clients.find(p => p.type === clientType)
|
||||||
|
if (_client) {
|
||||||
|
_client.logout()
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.clients.splice(this.clients.findIndex(p => p.type === clientType), 1)
|
||||||
|
// }, 1000 * 60 * 30)
|
||||||
|
}
|
||||||
|
this.status = this.clients.some(p => p.status === 'online') ? 'online' : 'offline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
import express from 'express'
|
||||||
|
import {createServer} from 'http'
|
||||||
|
import {Server, Socket} from 'socket.io'
|
||||||
|
import { Client } from './entity/Client';
|
||||||
|
import {User} from "./entity/User";
|
||||||
|
import {Room} from "./entity/Room";
|
||||||
|
import {Message} from "./entity/Message";
|
||||||
|
|
||||||
|
const app = express()
|
||||||
|
|
||||||
|
const httpServer = createServer(app)
|
||||||
|
const io = new Server(httpServer,{
|
||||||
|
cors: {
|
||||||
|
origin: '*'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const rooms: Array<Room> = []
|
||||||
|
|
||||||
|
function getRoom(id: string): Room | null {
|
||||||
|
return rooms.find(p => p.id === id) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
const users: Array<User> = []
|
||||||
|
|
||||||
|
function checkUser(unique: string, name: string): boolean {
|
||||||
|
return users.some(p => p.unique === unique && p.name != name)
|
||||||
|
}
|
||||||
|
|
||||||
|
function findUser(name: string, unique: string): User | null {
|
||||||
|
return users.find(p => p.name === name && p.unique === unique) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUser(id: string): User | null {
|
||||||
|
return users.find(p => p.id === id) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
function getClient(user: User, clientType: string): Client | null {
|
||||||
|
return user.clients.find(p => p.type === clientType) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
io.on("connection", (socket: Socket) => {
|
||||||
|
console.log('connected', socket.id)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登陆操作
|
||||||
|
*/
|
||||||
|
socket.on('login', req => {
|
||||||
|
console.log('login', req)
|
||||||
|
if (checkUser(req.unique, req.name)) return socket.emit('login',{status: 'error', message: 'unique is already existed'})
|
||||||
|
let _user = findUser(req.name, req.unique)
|
||||||
|
if (_user) {
|
||||||
|
let _client = getClient(_user, req.clientType)
|
||||||
|
if (_client) {
|
||||||
|
socket.to(_client.socketId).emit('login', {status: 'error', message: 'login at other place'})
|
||||||
|
_user.logout(req.clientType)
|
||||||
|
}
|
||||||
|
_user.login(socket.id, req.clientType)
|
||||||
|
socket.emit('login', {status: 'success', message: 'login success', data: _user})
|
||||||
|
} else {
|
||||||
|
_user = new User(req.name, req.unique, socket.id, req.clientType)
|
||||||
|
users.push(_user)
|
||||||
|
socket.emit('login', {status: 'success', message: 'login success', data: _user})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登出操作
|
||||||
|
*/
|
||||||
|
socket.on('logout', req => {
|
||||||
|
console.log('logout', req)
|
||||||
|
let _user = getUser(req.userId)
|
||||||
|
if (_user) {
|
||||||
|
_user.logout(req.clientType)
|
||||||
|
|
||||||
|
let _room = getRoom(req.roomId)
|
||||||
|
if (_room) {
|
||||||
|
_room.leave(_user)
|
||||||
|
socket.leave(_room.id)
|
||||||
|
|
||||||
|
if (_room.member.length === 0) {
|
||||||
|
rooms.splice(rooms.findIndex(p => p.id === req.roomId), 1)
|
||||||
|
} else {
|
||||||
|
io.in(req.roomId).emit('room', {status: 'success', data:_room})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.emit('logout', {status: 'success', message: 'logout success'})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增房间
|
||||||
|
*/
|
||||||
|
socket.on('create', req => {
|
||||||
|
console.log('create', req)
|
||||||
|
let _user = getUser(req.userId)
|
||||||
|
if (!_user) return socket.emit('create', {status: 'failure', message: 'user not existed'})
|
||||||
|
|
||||||
|
let _room = new Room(req.roomName, _user)
|
||||||
|
rooms.push(_room)
|
||||||
|
socket.join(_room.id)
|
||||||
|
socket.emit('create', {status: 'success', message: 'create room success', data: _room})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加入房间
|
||||||
|
*/
|
||||||
|
socket.on('join', req => {
|
||||||
|
console.log('join', req)
|
||||||
|
let _user = getUser(req.userId)
|
||||||
|
if (!_user) return socket.emit('join', {status: 'failure', message: 'user not existed'})
|
||||||
|
let _room = getRoom(req.roomId)
|
||||||
|
if (!_room) return socket.emit('join', {status: 'failure', message: 'room not existed'})
|
||||||
|
|
||||||
|
_room.join(_user)
|
||||||
|
socket.join(_room.id)
|
||||||
|
|
||||||
|
socket.emit('join', {status: 'success', message: 'join success'})
|
||||||
|
io.in(req.roomId).emit('room', {status: 'success', data:_room})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取房间信息
|
||||||
|
*/
|
||||||
|
socket.on('room', req => {
|
||||||
|
let _room = getRoom(req.roomId)
|
||||||
|
if (!_room) return socket.emit('join', {status: 'failure', message: 'room not existed'})
|
||||||
|
socket.emit('room', {status: 'success',data:_room})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 离开房间
|
||||||
|
*/
|
||||||
|
socket.on('leave', req => {
|
||||||
|
console.log('leave', req)
|
||||||
|
let _user = getUser(req.userId)
|
||||||
|
if (!_user) return socket.emit('leave', {status: 'failure', message: 'user not existed'})
|
||||||
|
let _room = getRoom(req.roomId)
|
||||||
|
if (!_room) return socket.emit('leave', {status: 'failure', message: 'room not existed'})
|
||||||
|
|
||||||
|
_room.leave(_user)
|
||||||
|
socket.leave(_room.id)
|
||||||
|
|
||||||
|
if (_room.member.length === 0) {
|
||||||
|
rooms.splice(rooms.findIndex(p => p.id === req.roomId), 1)
|
||||||
|
} else {
|
||||||
|
io.in(req.roomId).emit('room', {status: 'success', data:_room})
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.emit('leave', {status: 'success',message: 'leave success'})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送消息
|
||||||
|
*/
|
||||||
|
socket.on('message', req => {
|
||||||
|
console.log('message', req)
|
||||||
|
let _room = getRoom(req.roomId)
|
||||||
|
if (!_room) return socket.emit('message', {status: 'failure', message: 'room not existed'})
|
||||||
|
let _message = new Message(req.userId, req.content)
|
||||||
|
_room.messages.push(_message)
|
||||||
|
|
||||||
|
// socket.to(req.roomId).emit('message', {status: 'success', data: _message})
|
||||||
|
socket.emit('message', {status: 'success', message: 'send message success'})
|
||||||
|
io.in(req.roomId).emit('room', {status: 'success', data:_room})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加入聊天
|
||||||
|
*/
|
||||||
|
socket.on('join_chat', req => {
|
||||||
|
console.log('join_chat', req)
|
||||||
|
let _user = getUser(req.userId)
|
||||||
|
if (!_user) return socket.emit('join_chat', {status: 'failure', message: 'user not existed'})
|
||||||
|
let _room = getRoom(req.roomId)
|
||||||
|
if (!_room) return socket.emit('join_chat', {status: 'failure', message: 'room not existed'})
|
||||||
|
let _client = getClient(_user, req.clientType)
|
||||||
|
if (!_client) return socket.emit('join_chat', {status: 'failure', message: 'client not existed'})
|
||||||
|
|
||||||
|
_room.open(_user, _client, {video: req.video, audio: req.audio})
|
||||||
|
|
||||||
|
socket.emit('join_chat', {status: 'success',message: 'join chat success'})
|
||||||
|
|
||||||
|
io.in(req.roomId).emit('room', {status: 'success', data:_room})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 离开聊天
|
||||||
|
*/
|
||||||
|
socket.on('leave_chat', req => {
|
||||||
|
console.log('leave_chat', req)
|
||||||
|
let _user = getUser(req.userId)
|
||||||
|
if (!_user) return socket.emit('leave_chat', {status: 'failure', message: 'user not existed'})
|
||||||
|
let _room = getRoom(req.roomId)
|
||||||
|
if (!_room) return socket.emit('leave_chat', {status: 'failure', message: 'room not existed'})
|
||||||
|
|
||||||
|
_room.close(_user)
|
||||||
|
|
||||||
|
socket.emit('leave_chat', {status: 'success',message: 'leave chat success'})
|
||||||
|
io.in(req.roomId).emit('room', {status: 'success', data:_room})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* webrtc
|
||||||
|
*/
|
||||||
|
socket.on('chat', req => {
|
||||||
|
console.log('chat', req)
|
||||||
|
socket.to(req.to).emit('chat', {status: 'success', data: {from: req.from, to: req.to, sdp: req.sdp, candidate: req.candidate}})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 断开
|
||||||
|
*/
|
||||||
|
socket.on('close', req => {
|
||||||
|
console.log('close',req)
|
||||||
|
if (req.userId) {
|
||||||
|
let _user = users.find(p => p.id === req.userId)
|
||||||
|
if (_user) {
|
||||||
|
_user.logout(req.clientType)
|
||||||
|
|
||||||
|
let _room = rooms.find(p => p.id === req.roomId)
|
||||||
|
if (_room) {
|
||||||
|
_room.leave(_user)
|
||||||
|
|
||||||
|
if (_room.member.length === 0) {
|
||||||
|
rooms.splice(rooms.findIndex(p => p.id === req.roomId), 1)
|
||||||
|
} else {
|
||||||
|
io.in(req.roomId).emit('room', {status: 'success', data:_room})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
socket.disconnect()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
socket.on('disconnect', () => {
|
||||||
|
console.log('disconnect', socket.id)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
httpServer.listen(8000, () => {
|
||||||
|
console.log('application listening 8000')
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"name": "server-nodejs",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "webrtc demo server by nodejs",
|
||||||
|
"main": "main.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "null",
|
||||||
|
"dev": "nodemon --ext js,ts --exec 'ts-node main.ts'"
|
||||||
|
},
|
||||||
|
"author": "zhouxhere",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/express": "^4.17.13",
|
||||||
|
"express": "^4.17.1",
|
||||||
|
"socket.io": "^4.1.3",
|
||||||
|
"uuid": "^8.3.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/uuid": "^8.3.1",
|
||||||
|
"nodemon": "^2.0.12",
|
||||||
|
"ts-node": "^10.1.0",
|
||||||
|
"typescript": "^4.3.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es6",
|
||||||
|
"sourceMap": true,
|
||||||
|
"rootDir": "./",
|
||||||
|
"outDir": "./dist",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue