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

在线聊天完成

Browse Source
main
鲁誉程 11 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 charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'> <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 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'> <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( store.dispatch(requestActions.notify(
{ {
type : 'userMessage', type : 'userMessage',
title : `${sendingPeer.displayName} says:`, title : `${sendingPeer.displayName}`,
text : message, text : message,
timeout : 5000 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 Notifications = ({ notifications, onClick }) => {
const chatwarpRef = useRef(null); const chatwarpRef = useRef(null);
useEffect(() => { useEffect(() => {
if (chatwarpRef.current) { if (chatwarpRef.current) {
chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight; chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight;
@ -38,7 +38,7 @@ const Notifications = ({ notifications, onClick }) => {
</div> </div>
</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' }}> <div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
{notification.text} {notification.text}
</div> </div>

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

@ -14,33 +14,47 @@ import Peers from './Peers';
import Stats from './Stats'; import Stats from './Stats';
import Notifications from './Notifications'; import Notifications from './Notifications';
import NetworkThrottle from './NetworkThrottle'; import NetworkThrottle from './NetworkThrottle';
import { log } from 'gulp-util';
import UrlParse from 'url-parse';
class Room extends React.Component class Room extends React.Component {
{ render() {
render()
{
const { const {
roomClient, roomClient,
room, room,
me, me,
amActiveSpeaker, amActiveSpeaker,
onRoomLinkCopy onRoomLinkCopy
} = this.props; } = this.props;
const mediasoupClientVersion = room.mediasoupClientVersion === '__MEDIASOUP_CLIENT_VERSION__' const mediasoupClientVersion = room.mediasoupClientVersion === '__MEDIASOUP_CLIENT_VERSION__'
? 'dev' ? 'dev'
: room.mediasoupClientVersion; : 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 ( return (
<Appear duration={300}> <Appear duration={300}>
<div data-component='Room'> <div data-component='Room'>
<div className='crumbs'> <div className='crumbs'>
<span className='goback' onClick={() => { <span className='goback' onClick={() => {
// 向主页面发送消息请求返回主页面
window.parent.postMessage('goBack', '*');
}}> }}>
值班专家<span style={{margin: '0 4px'}}>{`>`}</span> 值班专家<span style={{ margin: '0 4px' }}>{`>`}</span>
</span> </span>
<span style={{color: '#5F6368'}}>在线聊天</span> <span style={{ color: '#5F6368' }}>在线聊天</span>
</div> </div>
<Notifications /> <Notifications />
@ -93,7 +107,7 @@ class Room extends React.Component
<div <div
className={classnames('me-container', { className={classnames('me-container', {
'active-speaker' : amActiveSpeaker 'active-speaker': amActiveSpeaker
})} })}
> >
<Me /> <Me />
@ -106,12 +120,11 @@ class Room extends React.Component
<div className='sidebar'> <div className='sidebar'>
<div <div
className={classnames('button', 'hide-videos', { className={classnames('button', 'hide-videos', {
on : me.audioOnly, on: me.audioOnly,
disabled : me.audioOnlyInProgress disabled: me.audioOnlyInProgress
})} })}
data-tip={'将参与者的视频 显示/隐藏'} data-tip={'将参与者的视频 显示/隐藏'}
onClick={() => onClick={() => {
{
me.audioOnly me.audioOnly
? roomClient.disableAudioOnly() ? roomClient.disableAudioOnly()
: roomClient.enableAudioOnly(); : roomClient.enableAudioOnly();
@ -120,11 +133,10 @@ class Room extends React.Component
<div <div
className={classnames('button', 'mute-audio', { className={classnames('button', 'mute-audio', {
on : me.audioMuted on: me.audioMuted
})} })}
data-tip={'将参与者的音频 静音/取消静音'} data-tip={'将参与者的音频 静音/取消静音'}
onClick={() => onClick={() => {
{
me.audioMuted me.audioMuted
? roomClient.unmuteAudio() ? roomClient.unmuteAudio()
: roomClient.muteAudio(); : roomClient.muteAudio();
@ -133,13 +145,13 @@ class Room extends React.Component
<div <div
className={classnames('button', 'restart-ice', { className={classnames('button', 'restart-ice', {
disabled : me.restartIceInProgress disabled: me.restartIceInProgress
})} })}
data-tip='重新启动 ICE' data-tip='重新启动 ICE'
onClick={() => roomClient.restartIce()} onClick={() => roomClient.restartIce()}
/> />
</div> </div>
{/* 当前房间状态信息 */} {/* 当前房间状态信息 */}
{/* <Stats /> */} {/* <Stats /> */}
@ -161,9 +173,8 @@ class Room extends React.Component
); );
} }
componentDidMount() componentDidMount() {
{ const { roomClient } = this.props;
const { roomClient } = this.props;
roomClient.join(); roomClient.join();
} }
@ -171,30 +182,27 @@ class Room extends React.Component
Room.propTypes = Room.propTypes =
{ {
roomClient : PropTypes.any.isRequired, roomClient: PropTypes.any.isRequired,
room : appPropTypes.Room.isRequired, room: appPropTypes.Room.isRequired,
me : appPropTypes.Me.isRequired, me: appPropTypes.Me.isRequired,
amActiveSpeaker : PropTypes.bool.isRequired, amActiveSpeaker: PropTypes.bool.isRequired,
onRoomLinkCopy : PropTypes.func.isRequired onRoomLinkCopy: PropTypes.func.isRequired
}; };
const mapStateToProps = (state) => const mapStateToProps = (state) => {
{
return { return {
room : state.room, room: state.room,
me : state.me, me: state.me,
amActiveSpeaker : state.me.id === state.room.activeSpeakerId amActiveSpeaker: state.me.id === state.room.activeSpeakerId
}; };
}; };
const mapDispatchToProps = (dispatch) => const mapDispatchToProps = (dispatch) => {
{
return { return {
onRoomLinkCopy : () => onRoomLinkCopy: () => {
{
dispatch(requestActions.notify( 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 * as stateActions from './redux/stateActions';
import reducers from './redux/reducers'; import reducers from './redux/reducers';
import Room from './components/Room'; import Room from './components/Room';
import { log } from 'gulp-util';
const logger = new Logger(); const logger = new Logger();
const reduxMiddlewares = [ thunk ]; const reduxMiddlewares = [ thunk ];
@ -54,7 +55,7 @@ domready(async () =>
logger.debug('DOM ready'); logger.debug('DOM ready');
await utils.initialize(); await utils.initialize();
run(); run();
}); });
@ -64,9 +65,21 @@ async function run()
const urlParser = new UrlParse(window.location.href, true); const urlParser = new UrlParse(window.location.href, true);
const peerId = randomString({ length: 8 }).toLowerCase(); 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 handlerName = urlParser.query.handlerName || urlParser.query.handler;
const forceTcp = urlParser.query.forceTcp === 'true'; const forceTcp = urlParser.query.forceTcp === 'true';
const produce = urlParser.query.produce !== 'false'; const produce = urlParser.query.produce !== 'false';
@ -103,7 +116,7 @@ async function run()
// eslint-disable-next-line require-atomic-updates // eslint-disable-next-line require-atomic-updates
window.NETWORK_THROTTLE_SECRET = throttleSecret; window.NETWORK_THROTTLE_SECRET = throttleSecret;
} }
if (!roomId) if (!roomId)
{ {
roomId = randomString({ length: 8 }).toLowerCase(); roomId = randomString({ length: 8 }).toLowerCase();

14
server/config.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save