[demo react] - 添加对自动重连的处理

examples/react/src/pages/room/index.jsx

@@ -75,6 +75,27 @@ export default class Room extends Component {
       }
       this.setState({ remoteStreams });
     });
+    this.client.on('connection-state-change', ({ previous, current }) => {
+      console.log(`连接状态 ${previous} -> ${current}`);
+    });
+    this.client.on('stream-reconnected', ({previous, current}) => {
+      console.log(`流已断开重连`);
+      if (previous.type === 'publish') {
+        const { localStreams } = this.state;
+        const idx = localStreams.findIndex(item => item.sid === previous.sid);
+        if (idx >= 0) {
+          localStreams.splice(idx, 1, current);
+          this.setState({ localStreams });
+        }
+      } else {
+        const { remoteStreams } = this.state;
+        const idx = remoteStreams.findIndex(item => item.sid === previous.sid);
+        if (idx >= 0) {
+          remoteStreams.splice(idx, 1, current);
+          this.setState({ remoteStreams });
+        }
+      }
+    });
 
     window.addEventListener('beforeunload', this.handleLeaveRoom);
   }
@@ -105,12 +126,12 @@ export default class Room extends Component {
 
   handlePublish = () => {
     this.client.publish(err => {
-      console.error('发布失败：', err);
+      console.error(`发布失败：错误码 - ${err.name}，错误信息 - ${err.message}`);
     });
   }
   handlePublishScreen = () => {
-    this.client.publish({audio: false, video: false, screen: true}, err => {
-      console.error('发布失败：', err);
+    this.client.publish({ audio: false, video: false, screen: true }, err => {
+      console.error(`发布失败：错误码 - ${err.name}，错误信息 - ${err.message}`);
     });
   }