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

调整

Browse Source
main
鲁誉程 2 months ago
parent 05fb19c521
commit af1fd4e98a
2 changed files with 61 additions and 82 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,104 +1,83 @@
import React from 'react'; import React, { useRef, useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import * as appPropTypes from './appPropTypes'; import * as appPropTypes from './appPropTypes';
import * as stateActions from '../redux/stateActions'; import * as stateActions from '../redux/stateActions';
import { Appear } from './transitions';
const Notifications = ({ notifications, onClick }) => { const Notifications = ({ notifications, onClick }) => {
console.log("notifications", notifications); const chatwarpRef = useRef(null);
return ( useEffect(() => {
<div data-component='Notifications' style={{ if (chatwarpRef.current) {
width: '383px', chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight;
background: '#F6F7F9', }
borderRadius: '8px', }, [notifications]);
margin: '48px 30px 19px 0px'
}}>
<div className='chatTitle'>聊天</div>
<div className='chatwarp'> return (
{ <div data-component='Notifications' style={{
notifications.map((notification) => { width: '383px',
return ( background: '#F6F7F9',
<div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}> borderRadius: '8px',
{ margin: '48px 30px 19px 0px'
// 类型是否是用户发送的消息 }}>
notification.type == 'userMessage' ? <div className='chatTitle'>聊天</div>
<div style={{marginTop: 36}}>
{
notification.isMe ?
<div style={{ display: 'flex', flexDirection: 'row-reverse', flexWrap: 'wrap' }}>
<div style={{ color: '#232B40', marginBottom: 10, width: '100%', textAlign: 'right' }}>我</div>
<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#CDD8F1', borderRadius: '8px 0px 8px 8px' }}>
{notification.text}
</div>
</div> :
<>
<div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
{notification.text}
</div>
</>
}
</div> :
<div style={{width: '100%', margin: '20px 0', textAlign: 'center'}}>
{notification.text}
</div>
}
</div> <div className='chatwarp' ref={chatwarpRef}>
{
notifications.map((notification) => (
// 信息提示动画 <div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}>
// <Appear key={notification.id} duration={250}> {
// <div notification.type === 'userMessage' ?
// className={classnames('notification', notification.type)} <div style={{marginTop: 36}}>
// onClick={() => onClick(notification.id)} {
// > notification.isMe ?
// <div className='icon' /> <div style={{ display: 'flex', flexDirection: 'row-reverse', flexWrap: 'wrap' }}>
<div style={{ color: '#232B40', marginBottom: 10, width: '100%', textAlign: 'right' }}>我</div>
// <div className='body'> <div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#CDD8F1', borderRadius: '8px 0px 8px 8px' }}>
// <If condition={notification.title}> {notification.text}
// <p className='title'>{notification.title}</p> </div>
// </If> </div> :
<>
// <p className='text'>{notification.text}</p> <div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
// </div> <div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
// </div> {notification.text}
// </Appear> </div>
); </>
}) }
} </div> :
</div> <div style={{width: '100%', margin: '30px 0', textAlign: 'center'}}>
</div> {notification.text}
); </div>
}
</div>
))
}
</div>
</div>
);
}; };
Notifications.propTypes = Notifications.propTypes = {
{ notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired, onClick: PropTypes.func.isRequired
onClick: PropTypes.func.isRequired
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
const { notifications } = state; const { notifications } = state;
return { notifications };
return { notifications };
}; };
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
onClick: (notificationId) => { onClick: (notificationId) => {
dispatch(stateActions.removeNotification(notificationId)); dispatch(stateActions.removeNotification(notificationId));
} }
}; };
}; };
const NotificationsContainer = connect( const NotificationsContainer = connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(Notifications); )(Notifications);
export default NotificationsContainer; export default NotificationsContainer;

2
server/config.js
Unescape View File

@ -17,7 +17,7 @@ module.exports =
// 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.167', // 换成你的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.

Write Preview
Loading…
Cancel
Save