diff --git a/package.json b/package.json
index 397d4ee5..36235f0f 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@monaco-editor/react": "^2.3.0",
     "@novnc/novnc": "^1.1.0",
+    "actioncable": "^5.2.4-3",
     "antd": "^3.26.15",
     "array-flatten": "^2.1.2",
     "autoprefixer": "7.1.6",
diff --git a/src/forge/Main/Detail.js b/src/forge/Main/Detail.js
index c8782cb0..750d9be3 100644
--- a/src/forge/Main/Detail.js
+++ b/src/forge/Main/Detail.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Spin, Tooltip } from 'antd';
 import { Link, Route, Switch } from 'react-router-dom';
 
@@ -154,6 +154,30 @@ class Detail extends Component {
     this.getDetail();
   }
 
+  canvasChannel = () => {
+    const actioncable = require("actioncable")
+    var project = this.state.project
+    var cable = actioncable.createConsumer('ws:/192.168.2.59:3000/cable');
+    this.canvasChannel1 = cable.subscriptions.create({
+                channel: `MirrorProjectChannel`,
+                id: project && project.identifier
+            },{
+                connected: () => {
+                    console.log("###### channel connected! ######")
+                    // this.getProject()
+                },
+                disconnected: () => {},
+                received: data => {
+                  console.log(`###### ---received data--- ######`);
+                  console.log(data);
+                  if (data ) {
+                    this.getDetail()
+                    cable.subscriptions.consumer.disconnect();
+                  }
+                }
+            })
+  }
+
   componentDidUpdate = (prevState) => {
     if ((prevState.match.params.projectsId !== this.props.match.params.projectsId)) {
       this.getProject();
@@ -165,9 +189,17 @@ class Detail extends Component {
     const { projectsId } = this.props.match.params;
     const url = `/projects/${projectsId}/simple.json`;
     axios.get(url).then((result) => {
-      this.setState({
-        project: result.data
-      })
+      if(result && result.data){
+        this.setState({
+          project: result.data
+        })
+
+        if (result.data.type != 0 && result.data.mirror_status == 1){
+          console.log("--------start channel --------");
+          this.canvasChannel();
+        }
+      }
+
     })
   }