调整

app/lib/components/Notifications.jsx

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import * as appPropTypes from './appPropTypes';
 import * as stateActions from '../redux/stateActions';
-import { Appear } from './transitions';
 
 const Notifications = ({ notifications, onClick }) => {
-	console.log("notifications", notifications);
+    const chatwarpRef = useRef(null);
+
+    useEffect(() => {
+        if (chatwarpRef.current) {
+            chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight;
+        }
+    }, [notifications]);
 
     return (
         <div data-component='Notifications' style={{
@@ -18,14 +22,12 @@ const Notifications = ({ notifications, onClick }) => {
         }}>
             <div className='chatTitle'>聊天</div>
 
-			<div className='chatwarp'>
+            <div className='chatwarp' ref={chatwarpRef}>
                 {
-					notifications.map((notification) => {
-						return (
+                    notifications.map((notification) => (
                         <div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}>
                             {
-									// 类型是否是用户发送的消息
-									notification.type == 'userMessage' ?
+                                notification.type === 'userMessage' ?
                                     <div style={{marginTop: 36}}>
                                         {
                                             notification.isMe ?
@@ -43,48 +45,25 @@ const Notifications = ({ notifications, onClick }) => {
                                                 </>
                                         }
                                     </div> :
-										<div style={{width: '100%', margin: '20px 0', textAlign: 'center'}}>
+                                    <div style={{width: '100%', margin: '30px 0', textAlign: 'center'}}>
                                         {notification.text}
                                     </div>
                             }
-
                         </div>
-
-
-							// 信息提示动画
-							// <Appear key={notification.id} duration={250}>
-							// 	<div
-							// 		className={classnames('notification', notification.type)}
-							// 		onClick={() => onClick(notification.id)}
-							// 	>
-							// 		<div className='icon' />
-
-							// 		<div className='body'>
-							// 			<If condition={notification.title}>
-							// 				<p className='title'>{notification.title}</p>
-							// 			</If>
-
-							// 			<p className='text'>{notification.text}</p>
-							// 		</div>
-							// 	</div>
-							// </Appear>
-						);
-					})
+                    ))
                 }
             </div>
         </div>
     );
 };
 
-Notifications.propTypes =
-{
+Notifications.propTypes = {
     notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
     onClick: PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) => {
     const { notifications } = state;
-
     return { notifications };
 };
 

server/config.js

@@ -17,7 +17,7 @@ module.exports =
 	// Signaling settings (protoo WebSocket server and HTTP API server).
 	https  :
 	{
-		listenIp   : '0.0.0.0', // 换成你的IP地址
+		listenIp   : '192.168.0.167', // 换成你的IP地址
 		// NOTE: Don't change listenPort (client app assumes 4443).
 		listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
 		// NOTE: Set your own valid certificate files.