p6molspfw
/
zzxy_chat_online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

在线聊天完成

Browse Source
main
鲁誉程 2 months ago
parent 3a7e4e8a2f
commit abe6511138
6 changed files with 73 additions and 51 deletions
Show Stats Download Patch File Download Diff File

1
app/index.html
Unescape View File

@ -6,6 +6,7 @@
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
<meta name='description' content='mediasoup demo - Cutting Edge WebRTC Video Conferencing'>
<meta http-equiv="Permissions-Policy" content="microphone=(self), camera=(self)">
<link rel='stylesheet' href='/mediasoup-demo-app.css?v=foo2'>

2
app/lib/RoomClient.js
Unescape View File

@ -544,7 +544,7 @@ export default class RoomClient
store.dispatch(requestActions.notify(
{
type : 'userMessage',
title : `${sendingPeer.displayName} says:`,
title : `${sendingPeer.displayName}`,
text : message,
timeout : 5000
}));

4
app/lib/components/Notifications.jsx
Unescape View File

@ -6,7 +6,7 @@ import * as stateActions from '../redux/stateActions';
const Notifications = ({ notifications, onClick }) => {
const chatwarpRef = useRef(null);
useEffect(() => {
if (chatwarpRef.current) {
chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight;
@ -38,7 +38,7 @@ const Notifications = ({ notifications, onClick }) => {
</div>
</div> :
<>
<div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
<div style={{ color: '#232B40', marginBottom: 10 }}>{notification.title}</div>
<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
{notification.text}
</div>

80
app/lib/components/Room.jsx
Unescape View File

@ -14,33 +14,47 @@ import Peers from './Peers';
import Stats from './Stats';
import Notifications from './Notifications';
import NetworkThrottle from './NetworkThrottle';
import { log } from 'gulp-util';
import UrlParse from 'url-parse';
class Room extends React.Component
{
render()
{
class Room extends React.Component {
render() {
const {
roomClient,
room,
me,
amActiveSpeaker,
onRoomLinkCopy
} = this.props;
} = this.props;
const mediasoupClientVersion = room.mediasoupClientVersion === '__MEDIASOUP_CLIENT_VERSION__'
? 'dev'
: room.mediasoupClientVersion;
const urlParser = new UrlParse(window.location.href, true);
// 将字符串按 & 分隔
const parts = urlParser.href.split('&');
// 提取并解析每个部分
const params = parts.slice(1).reduce((acc, part) => {
const [key, value] = part.split('=');
if (key && value) acc[key] = value;
return acc;
}, {});
let roomId = params['roomId'];
return (
<Appear duration={300}>
<div data-component='Room'>
<div className='crumbs'>
<span className='goback' onClick={() => {
// 向主页面发送消息请求返回主页面
window.parent.postMessage('goBack', '*');
}}>
值班专家<span style={{margin: '0 4px'}}>{`>`}</span>
值班专家<span style={{ margin: '0 4px' }}>{`>`}</span>
</span>
<span style={{color: '#5F6368'}}>在线聊天</span>
<span style={{ color: '#5F6368' }}>在线聊天</span>
</div>
<Notifications />
@ -93,7 +107,7 @@ class Room extends React.Component
<div
className={classnames('me-container', {
'active-speaker' : amActiveSpeaker
'active-speaker': amActiveSpeaker
})}
>
<Me />
@ -106,12 +120,11 @@ class Room extends React.Component
<div className='sidebar'>
<div
className={classnames('button', 'hide-videos', {
on : me.audioOnly,
disabled : me.audioOnlyInProgress
on: me.audioOnly,
disabled: me.audioOnlyInProgress
})}
data-tip={'将参与者的视频 显示/隐藏'}
onClick={() =>
{
onClick={() => {
me.audioOnly
? roomClient.disableAudioOnly()
: roomClient.enableAudioOnly();
@ -120,11 +133,10 @@ class Room extends React.Component
<div
className={classnames('button', 'mute-audio', {
on : me.audioMuted
on: me.audioMuted
})}
data-tip={'将参与者的音频 静音/取消静音'}
onClick={() =>
{
onClick={() => {
me.audioMuted
? roomClient.unmuteAudio()
: roomClient.muteAudio();
@ -133,13 +145,13 @@ class Room extends React.Component
<div
className={classnames('button', 'restart-ice', {
disabled : me.restartIceInProgress
disabled: me.restartIceInProgress
})}
data-tip='重新启动 ICE'
onClick={() => roomClient.restartIce()}
/>
</div>
{/* 当前房间状态信息 */}
{/* <Stats /> */}
@ -161,9 +173,8 @@ class Room extends React.Component
);
}
componentDidMount()
{
const { roomClient } = this.props;
componentDidMount() {
const { roomClient } = this.props;
roomClient.join();
}
@ -171,30 +182,27 @@ class Room extends React.Component
Room.propTypes =
{
roomClient : PropTypes.any.isRequired,
room : appPropTypes.Room.isRequired,
me : appPropTypes.Me.isRequired,
amActiveSpeaker : PropTypes.bool.isRequired,
onRoomLinkCopy : PropTypes.func.isRequired
roomClient: PropTypes.any.isRequired,
room: appPropTypes.Room.isRequired,
me: appPropTypes.Me.isRequired,
amActiveSpeaker: PropTypes.bool.isRequired,
onRoomLinkCopy: PropTypes.func.isRequired
};
const mapStateToProps = (state) =>
{
const mapStateToProps = (state) => {
return {
room : state.room,
me : state.me,
amActiveSpeaker : state.me.id === state.room.activeSpeakerId
room: state.room,
me: state.me,
amActiveSpeaker: state.me.id === state.room.activeSpeakerId
};
};
const mapDispatchToProps = (dispatch) =>
{
const mapDispatchToProps = (dispatch) => {
return {
onRoomLinkCopy : () =>
{
onRoomLinkCopy: () => {
dispatch(requestActions.notify(
{
text : '房间链接已复制到剪贴板'
text: '房间链接已复制到剪贴板'
}));
}
};

23
app/lib/index.jsx
Unescape View File

@ -21,6 +21,7 @@ import * as cookiesManager from './cookiesManager';
import * as stateActions from './redux/stateActions';
import reducers from './redux/reducers';
import Room from './components/Room';
import { log } from 'gulp-util';
const logger = new Logger();
const reduxMiddlewares = [ thunk ];
@ -54,7 +55,7 @@ domready(async () =>
logger.debug('DOM ready');
await utils.initialize();
run();
});
@ -64,9 +65,21 @@ async function run()
const urlParser = new UrlParse(window.location.href, true);
const peerId = randomString({ length: 8 }).toLowerCase();
let roomId = urlParser.query.roomId;
let displayName =
urlParser.query.displayName || (cookiesManager.getUser() || {}).displayName;
// 将字符串按 & 分隔
const parts = urlParser.href.split('&');
// 提取并解析每个部分
const params = parts.slice(1).reduce((acc, part) => {
const [key, value] = part.split('=');
if (key && value) acc[key] = value;
return acc;
}, {});
let roomId = params['roomId'];
let userName = decodeURIComponent(params['userName']);
let displayName = userName || (cookiesManager.getUser() || {}).displayName;
const handlerName = urlParser.query.handlerName || urlParser.query.handler;
const forceTcp = urlParser.query.forceTcp === 'true';
const produce = urlParser.query.produce !== 'false';
@ -103,7 +116,7 @@ async function run()
// eslint-disable-next-line require-atomic-updates
window.NETWORK_THROTTLE_SECRET = throttleSecret;
}
if (!roomId)
{
roomId = randomString({ length: 8 }).toLowerCase();

14
server/config.js
Unescape View File

@ -13,11 +13,11 @@ const os = require('os');
module.exports =
{
// Listening hostname (just for `gulp live` task).
domain : process.env.DOMAIN || '0.0.0.0',
domain : process.env.DOMAIN || '192.168.0.210',
// Signaling settings (protoo WebSocket server and HTTP API server).
https :
{
listenIp : '0.0.0.0', // 换成你的IP地址
listenIp : '192.168.0.210', // 换成你的IP地址
// NOTE: Don't change listenPort (client app assumes 4443).
listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
// NOTE: Set your own valid certificate files.
@ -124,13 +124,13 @@ module.exports =
[
{
protocol : 'udp',
ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
ip : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
port : 44444
},
{
protocol : 'tcp',
ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
ip : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
port : 44444
}
@ -147,7 +147,7 @@ module.exports =
[
{
protocol : 'udp',
ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
ip : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
portRange :
{
@ -157,7 +157,7 @@ module.exports =
},
{
protocol : 'tcp',
ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
ip : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
portRange :
{
@ -180,7 +180,7 @@ module.exports =
listenInfo :
{
protocol : 'udp',
ip : process.env.MEDIASOUP_LISTEN_IP || '0.0.0.0', // 换成你的IP地址
ip : process.env.MEDIASOUP_LISTEN_IP || '192.168.0.210', // 换成你的IP地址
announcedAddress : process.env.MEDIASOUP_ANNOUNCED_IP,
portRange :
{

Write Preview
Loading…
Cancel
Save