ml小程序

package-lock.json

@@ -15823,6 +15823,11 @@
       "resolved": "https://registry.npmjs.org/xterm/-/xterm-4.5.0.tgz",
       "integrity": "sha512-4t12tsvtYnv13FBJwewddxdI/j4kSonmbQQv50j34R/rPIFbUNGtptbprmuUlTDAKvHLMDZ/Np2XcpNimga/HQ=="
     },
+    "xterm-addon-fit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.4.0.tgz",
+      "integrity": "sha512-p4BESuV/g2L6pZzFHpeNLLnep9mp/DkF3qrPglMiucSFtD8iJxtMufEoEJbN8LZwB4i+8PFpFvVuFrGOSpW05w=="
+    },
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",

package.json

@@ -92,7 +92,8 @@
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3",
-    "xterm": "^4.5.0"
+    "xterm": "^4.5.0",
+    "xterm-addon-fit": "^0.4.0"
   },
   "scripts": {
     "start": "node scripts/start.js",

public/api.js

 var API = {
-    'www': 'http://www-test.julyedu.com',
-    'home': 'http://fast-test.julyedu.com',
-    'search-api': 'https://search.julyedu.com',
-    'passport-api': 'http://passport-test.julyedu.com',
-    'base-api': 'http://api-test.julyedu.com',
-    'record': 'record.julyedu.com:8001',
-    'process-api': 'ws:process-test.julyedu.com:9502',
-    'm': 'http://m-test.julyedu.com',
+  'www': 'http://www-test.julyedu.com',
+  'home': 'http://fast-test.julyedu.com',
+  'search-api': 'https://search.julyedu.com',
+  'passport-api': 'http://passport-test.julyedu.com',
+  'base-api': 'http://api-test.julyedu.com',
+  'record': 'record.julyedu.com:8001',
+  'process-api': 'ws:process-test.julyedu.com:9502',
+  'm': 'http://m-test.julyedu.com',
+  //terminal
+  'ws': 'ws://47.93.119.175:8888/ws',
 }

src/components/interactive-tutorial/catalog/index.scss

 .catalog {
   display: flex;
   padding-left: 12px;
-  margin-bottom: 38px;
+  margin-bottom: 24px;
   font-size: 20px;
   color: #FFD667;
   align-items: center;

src/components/interactive-tutorial/consts.js

@@ -7,9 +7,8 @@ export const questionType = {
 }
 
 export const status = {
-  practice: '练习',
-  practicing: '练习中...',
-  startPractice: '开始练习',
-  resumePractice: '继续练习',
+  practicingSingle: '练习中...',
+  practicingProgram: '练习中...（无法运行时退出重进即可）',
+  resumePractice: '继续',
   nextSection: '下一关',
 }
\ No newline at end of file

src/components/interactive-tutorial/container/index.scss

 .container {
+  width: 100%;
   display: flex;
   padding-right: 10px;
   margin-bottom: 21.5px;
@@ -23,12 +24,10 @@
   }
 
   .content {
+    width: 100%;
     padding-left: 10.5px;
     color: rgba(207, 219, 229, .8);
     font-size: 15px;
-    /*img{
-      width: 100%;
-    }*/
   }
 
   .subtitle{

src/components/interactive-tutorial/index.js

@@ -9,35 +9,40 @@ import { Toast } from 'antd-mobile'
 import { questionType, status } from './consts'
 import Catalog from './catalog'
 
+
 class InteractiveStudy extends Component {
-  singleIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/single-answer-icon.png'
-  programIcon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/program-icon.png'
+  container = null
   state = {
-    options: [
-      'A. 程序向屏幕输出信息的过程，是人与计算机的单向沟通。',
-      'B. 程序向内部输入信息的过程。',
-      'C. 程序向内部输入信息的过程。',
-    ],
-    img: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/weekend/bigdata/project/07.png',
     page: 1,
+    progress: 0,
     schedule: {},
     pageData: {},
+    cachedList: [],
     processContent: [],
-    processStatus: status.startPractice,
+    processStatus: status.resumePractice,
     isComplete: false,
+    avatar: '',
+    isFirst: true,
+    isProgramShowed: 0,
+    videoId: '',
   }
 
   componentDidMount() {
-
     this.getSchedule().then(res => {
       const {code, msg, data} = res.data
       if (code === 200) {
-
+        const pageInfo = data.page_info
+        const page = pageInfo.current_page
         this.setState({
           schedule: data,
+          avatar: data.teacher_avatar,
+          page,
+          videoId: data.current_video_id,
+        })
+        this.getPageContent(data.current_video_id, () => {
+          this.updatePosition()
+          this.getPageContent(data.current_video_id)
         })
-        this.getPageContent(data.current_video_id)
-
       } else {
         this.showToast(msg)
       }
@@ -50,20 +55,45 @@ class InteractiveStudy extends Component {
     })
   }
 
+  updatePosition = () => {
+    setTimeout(() => {
+      window.scrollTo(0, this.container.scrollHeight)
+    })
+  }
+
+  resetProcessStatus = () => {
+    this.setState({
+      processStatus: status.resumePractice,
+    })
+  }
+
   showToast = (msg, type = 'info') => {
     Toast[type](msg, 2, null, false)
   }
 
-  getPageContent = (videoId) => {
-    http.post(`${API.home}/m/it/study/syllabus?page=${this.state.page}`, {
+  getPageContent = (videoId, cb) => {
+    http.post(`${API.home}/m/it/study/syllabus?page=${this.state.isFirst ? 1 : this.state.page}`, {
       course_id: getParam('id'),
       video_id: videoId,
-      type: 1,
+      type: this.state.isFirst ? 1 : 2,
     }).then(res => {
       const {code, msg, data} = res.data
       if (code === 200) {
-        this.setState({
-          pageData: data,
+        this.setState(state => {
+          const totalPage = state.schedule.page_info.total_pages
+          const page = state.page < totalPage ? state.isFirst ? state.page : state.page + 1 : totalPage
+          const progress = state.processContent.length
+            ? data.syllabus_list.findIndex(item => item.syllabus_id === state.processContent[state.processContent.length - 1].syllabus_id) + 1
+            : 0
+          return {
+            processContent: state.isFirst ? (state.processContent.concat(data.syllabus_list)) : state.processContent,
+            isFirst: false,
+            page,
+            pageData: data,
+            progress: state.isFirst ? state.progress : progress,
+          }
+        }, () => {
+          cb && cb()
         })
       } else {
         this.showToast(msg)
@@ -71,26 +101,92 @@ class InteractiveStudy extends Component {
     })
   }
 
-  render() {
+  saveSchedule = (syllabusId, unitInfoId) => {
+    http.post(`/m/it/user/saveSchedule`, {
+      syllabus_id: syllabusId,
+      unit_info_id: unitInfoId,
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+
+      } else {
+        this.showToast(msg, 'fail')
+      }
+    })
+  }
+
+  process = () => {
     const {processStatus} = this.state
+    if (processStatus === status.practicingProgram || processStatus === status.practicingSingle) {
+      this.showToast('有其他正在进行的练习')
+      return
+    }
+    this.setState(state => {
+      let nextQuestion, progress, cachedList = state.cachedList
+      if (state.cachedList.length) {
+        nextQuestion = [cachedList.pop()]
+        progress = 0
+      } else {
+        nextQuestion = state.pageData.syllabus_list.slice(state.progress, state.progress + 1)
+        progress = state.progress + 1
+      }
+      if (!cachedList.length && state.progress === state.pageData.syllabus_list.length - 6) {
+        cachedList = state.pageData.syllabus_list.slice(state.progress + 1).reverse()
+        console.log(state.page)
+        this.getPageContent(state.videoId)
+      }
+      let processStatus = nextQuestion[0].type === questionType.singleAnswer
+        ? status.practicingSingle
+        : nextQuestion[0].type === questionType.program
+          ? status.practicingProgram
+          : status.resumePractice
+      return {
+        processContent: state.processContent.concat(nextQuestion),
+        progress,
+        processStatus,
+        isProgramShowed: processStatus === status.practicingProgram && (state.isProgramShowed + 1),
+        cachedList,
+      }
+    }, () => {
+      // console.log(this.state.processContent)
+      // console.log(this.state.cachedList)
+      this.updatePosition()
+    })
+  }
+
+  render() {
+    const {processStatus, processContent, avatar, isProgramShowed} = this.state
     return (
-      <div id={'interactive-study'}>
-        <Catalog title={'Print()函数'}/>
-        <Container>
-          <span className={'subtitle'}>副标题</span>
-        </Container>
-        <Container>
-          <img
-            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590155695725&di=0a1cad792ef55dc43305ab904aae04fb&imgtype=0&src=http%3A%2F%2Fsearchfoto.ru%2Fimg%2FxyygpKbDS1y8pTjXUy83VS8rMS9fLSy3RL8mwz0yx9fcM0EtJ0S2PyCnOy8sOSTMOqQq38I23NHf0SHTNV0vMLbAutzUyNgCzMmwNzSGsomJbQzCjIDnHNgUMwNx8W1OIMNBoQz1DAA.jpg"
-            alt=""/>
-        </Container>
-        <Container user={'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png'}
-                   content={'Hi！初次见面，我叫小柒，是你在七月在线的课程导师。从现在开始，你就要跟着我一起学Python啦，请敲回车键继续课程。'}/>
-        <SingleAnswerQuestion user={this.singleIcon} topic={'请问，你会推荐哪个物品给用户C？'} options={this.state.options}
-                              img={this.state.img}/>
-        <Program user={this.programIcon} code={"week = ['星期一', '星期二', '星期三']\nprint(123)"}/>
+      <div id={'interactive-study'} ref={el => this.container = el}>
+        {
+          !!processContent.length && processContent.map(item => {
+            if (item.catalogue === 1) {
+              switch (item.type) {
+                case questionType.text:
+                  return <Container user={avatar} content={item.content} key={item.syllabus_id}/>
+                case questionType.image:
+                  return <Container user={avatar} key={item.syllabus_id}>
+                    <img src={item.content} alt=""/>
+                  </Container>
+                case questionType.singleAnswer:
+                  return <SingleAnswerQuestion user={avatar} topic={item.content} question={item}
+                                               key={item.syllabus_id} updatePosition={this.updatePosition}
+                                               resetStatus={this.resetProcessStatus}/>
+                case questionType.codeBlock:
+                case questionType.program:
+                  return <Program question={item} key={item.syllabus_id} isProgramShowed={isProgramShowed}/>
+              }
+            } else if (item.catalogue === 2) {
+              return <Catalog title={item.content} key={item.syllabus_id}/>
+            } else {
+              return <Container key={item.syllabus_id}>
+                <span className={'subtitle'}>{item.content}</span>
+              </Container>
+            }
+          })
+        }
         {/*<Project user={this.singleIcon}/>*/}
-        <div className="status-bar">
+        <div className="status-bar" onClick={this.process}>
           {/*<span className={'complete'}>已学完全部课时</span>*/}
           <span className={'status'}>{processStatus}</span>
           {/*<div className="free-trial-end">*/}

src/components/interactive-tutorial/index.scss

+body{
+  background-color: #252529;
+}
+
 #interactive-study {
-  position: relative;
   min-height: 100%;
+  position: relative;
   background-color: #252529;
   padding-bottom: 49px;
   padding-top: 20px;
@@ -30,9 +34,9 @@
       font-size: 18px;
     }
 
-    .status{
+    .status {
       color: #CFDBE5;
-      font-size: 12px;
+      font-size: 16px;
     }
 
     .free-trial-end {
@@ -40,7 +44,8 @@
       justify-content: space-between;
       align-items: center;
       padding: 0 15px;
-      button{
+
+      button {
         width: 80px;
         height: 30px;
         -webkit-appearance: none;

src/components/interactive-tutorial/program/index.js

 import React, { Component } from 'react';
 import './index.scss'
 import Container from '../container'
+import Terminal from '../terminal'
 import AceEditor from 'react-ace'
 import 'ace-builds/src-min-noconflict/theme-dracula'
 import 'ace-builds/src-min-noconflict/mode-python'
 import StatusBar from './status-bar'
+import { http } from "@/utils"
+import { Toast } from "antd-mobile";
+import { questionType } from '../consts'
 
-const {First, Normal, Pass, Error, InputTip} = StatusBar
+
+const {First, Normal, Pass, Error, InputTip, Skipped, Finished} = StatusBar
 
 class Program extends Component {
-  editor = null
+  userEditor = null
+  icon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/program-icon.png'
+  ws = null
 
   state = {
     editorWidth: '',
+    showTerminal: false,
+    code: '',
+    answer: '',
+    showAnswer: false,
+    result: '',
+    filename: '',
+    executing: false,
   }
 
   componentDidMount() {
-    const content = document.querySelector('.container .content')
-    const contentStyles = window.getComputedStyle(content)
-    const contentWidth = content.clientWidth
+    const contentElem = document.querySelector('.container .content')
+    const contentStyles = window.getComputedStyle(contentElem)
+    const contentWidth = contentElem.clientWidth
     const contentPaddingLeft = parseFloat(contentStyles.getPropertyValue('padding-left'))
+    const {type, code_ques, content, user_answer} = this.props.question
+    let code = content
+    let answer = '', result = '', showTerminal = false
+    if (type === questionType.program) {
+      code = code_ques.code
+      answer = code_ques.answer
+      if (user_answer && user_answer.is_finish && user_answer.result) {
+        result = user_answer.result
+        showTerminal = true
+      }
+    }
     this.setState({
       editorWidth: `${contentWidth - contentPaddingLeft}px`,
+      code,
+      answer,
+      result,
+      showTerminal,
     })
   }
 
   onLoad = editor => {
-    this.editor = editor
+    this.userEditor = editor
   }
 
+  execute = () => {
+    // this.getAuthenticationData()
+    this.uploadCode().then(filename => {
+      this.setState({
+        filename,
+        executing: true,
+        showTerminal: true,
+      })
+    })
+  }
+
+  uploadCode = () => {
+    return http.post(`${API.home}/web/python/practice/file`, {
+      code: this.userEditor.getValue(),
+    }).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        return data.filename
+      } else {
+        Toast.fail(msg, 2)
+      }
+    })
+  }
 
   render() {
-    const {editorWidth} = this.state
-    const {user, code} = this.props
+    const {editorWidth, showTerminal, code, answer, showAnswer, result, executing, filename} = this.state
+    const {user, question: {type, user_answer, content}, isProgramShowed} = this.props
     return (
-      <Container
-        user={user}
-        content={
-          <div className="program">
-            <AceEditor
-              name={'ace-editor'}
-              mode={'python'}
-              theme={'dracula'}
-              readOnly={true}
-              value={code}
-              width={editorWidth}
-              height={'141px'}
-              onLoad={this.onLoad}
-            />
-            <InputTip/>
-          </div>
+      <>
+        {
+          content && type !== questionType.codeBlock && <Container content={content}></Container>
         }
-      />
+        <Container
+          user={this.icon}
+          content={
+            <div className="program">
+              <AceEditor
+                name={'ace-editor'}
+                mode={'python'}
+                theme={'dracula'}
+                readOnly={true}
+                value={code}
+                width={editorWidth}
+                height={'141px'}
+                onLoad={this.onLoad}
+              />
+              {
+                showAnswer && <AceEditor
+                  name={'ace-editor'}
+                  mode={'python'}
+                  theme={'dracula'}
+                  readOnly={true}
+                  value={answer}
+                  width={editorWidth}
+                  height={'141px'}
+                />
+              }
+              {
+                type !== questionType.codeBlock &&
+                <ToolBar isProgramShowed={isProgramShowed} userAnswer={user_answer} execute={this.execute}/>
+              }
+              {
+                showTerminal && <Terminal result={result} executing={executing} filename={filename}/>
+              }
+            </div>
+          }
+        />
+      </>
     );
   }
 }
 
+function ToolBar({isProgramShowed, userAnswer, isSuccessful, execute}) {
+  if (userAnswer && userAnswer.is_finish) {
+    if (userAnswer.is_jump) {
+      return <Skipped/>
+    }
+    return <Finished/>
+  }
+  return isProgramShowed ? <Normal/> : <First execute={execute}/>
+}
+
 export default Program;
\ No newline at end of file

src/components/interactive-tutorial/program/index.scss

 .program {
-
+  width: 100%;
   background-color: #1f1f24;
   padding-top: 12px;
 

src/components/interactive-tutorial/program/status-bar/index.js

@@ -52,10 +52,28 @@ const InputTip = () => {
   </Base>
 }
 
+const Skipped = () => {
+  return <Base className={'skipped complete'}>
+    <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/exclamation-mark.png" alt=""/>
+    <div className="tip">已跳过课堂练习！</div>
+    <a href="javascript:void(0);">重新运行</a>
+  </Base>
+}
+
+const Finished = () => {
+  return <Base className={'finished complete'}>
+    <i className={'iconfont icondanseshixintubiao-5'}></i>
+    <div className="tip">已跳过课堂练习！</div>
+    <a href="javascript:void(0);">重新运行</a>
+  </Base>
+}
+
 export default {
   First,
   Normal,
   Pass,
   Error,
-  InputTip
+  InputTip,
+  Skipped,
+  Finished
 };
\ No newline at end of file

src/components/interactive-tutorial/program/status-bar/index.scss

@@ -83,14 +83,50 @@ $primaryColor: rgba(0, 153, 255, .8);
   }
 }
 
-.input-tip{
-  .tip{
+.input-tip {
+  .tip {
     font-size: 12px;
     color: #CFDBE5;
   }
-  button{
+
+  button {
     border: 1px solid #09f;
     background: transparent;
     color: #09f;
   }
+}
+
+.complete {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  .iconfont {
+    font-size: 18px;
+
+  }
+
+  a {
+    font-size: 12px;
+    color: #CFDBE5;
+    text-decoration: underline;
+  }
+
+  img {
+    width: 18px;
+    height: 18px;
+  }
+
+  .tip {
+    margin-left: 11px;
+    font-size: 15px;
+  }
+
+  &.finish {
+    color: #74C17C;
+  }
+
+  &.skipped {
+    color: #CFDBE6;
+  }
 }
\ No newline at end of file

src/components/interactive-tutorial/project/index.scss

-html,body{
-  min-height: 100%;
-}
 #project {
   table {
     width: 315px;

src/components/interactive-tutorial/single-answer-question/index.js

@@ -2,43 +2,85 @@ import React, { Component } from 'react';
 import './index.scss'
 import Container from '../container'
 import classnames from 'classnames'
+import { html } from "@/utils"
 
 class SingleAnswerQuestion extends Component {
 
+  icon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/single-answer-icon.png'
+
   state = {
     correct: '',
-    wrong: ''
+    wrong: '',
+    replies: [],
+    selectable: false,
   }
 
-  handleSelect = index => {
+  handleSelect = (info, index) => {
+    if (!this.state.selectable) {
+      return
+    }
+
+    const {question: {unit_questions}, updatePosition, resetStatus} = this.props
+    const userSelect = unit_questions[index]
     this.setState({
-      wrong: index
+      wrong: userSelect.is_ans ? '' : index,
+      correct: userSelect.is_ans ? index : '',
+      replies: info,
+      selectable: false,
+    }, () => {
+      updatePosition()
+      resetStatus()
     })
   }
 
+  componentDidMount() {
+    const {user_answer: userAnswer, unit_questions: options} = this.props.question
+    if (userAnswer && userAnswer.answer) {
+      const userSelectId = userAnswer.answer
+      const userSelectIndex = options.findIndex(item => item.unit_id == userSelectId)
+      const isUserCorrect = options[userSelectIndex].is_ans
+      this.setState({
+        correct: isUserCorrect ? userSelectIndex : '',
+        wrong: isUserCorrect ? '' : userSelectIndex,
+        replies: options[userSelectIndex].unit_info,
+        selectable: false,
+      })
+    } else {
+      this.setState({
+        selectable: true,
+      })
+    }
+  }
+
+
   render() {
-    const {correct, wrong} = this.state
-    const {user, topic, img, options} = this.props
+    const {correct, wrong, replies} = this.state
+    const {user, topic, img, question: {unit_questions: options}} = this.props
     return (
-      <Container
-        user={user}
-        content={
-          <div className={'single-answer-question'}>
-            <div className="topic">{topic}</div>
-            {img && <img src={img} alt=""/>}
-            <ul>
-              {
-                options && !!options.length && options.map((item, index) => {
-                  return <li
-                    className={classnames(['option', {'correct': index === correct, 'wrong': index === wrong}])}
-                    key={index}
-                    onClick={this.handleSelect.bind(this, index)}>{item}</li>
-                })
-              }
-            </ul>
-          </div>
+      <>
+        <Container
+          user={this.icon}
+          content={
+            <div className={'single-answer-question'}>
+              <div className="topic" dangerouslySetInnerHTML={html(topic)}></div>
+              {img && <img src={img} alt=""/>}
+              <ul>
+                {
+                  options && !!options.length && options.map((item, index) => {
+                    return <li
+                      className={classnames(['option', {'correct': index === correct, 'wrong': index === wrong}])}
+                      key={index}
+                      onClick={this.handleSelect.bind(this, item.unit_info, index)}>{item.des}</li>
+                  })
+                }
+              </ul>
+            </div>
+          }
+        />
+        {
+          !!replies.length && replies.map(item => <Container key={item.info_id} content={item.content}/>)
         }
-      />
+      </>
     );
   }
 }

src/components/interactive-tutorial/terminal/index.js

+import React, { Component } from 'react';
+import './index.scss'
+import { Terminal } from "xterm"
+import 'xterm/css/xterm.css'
+import { FitAddon } from "xterm-addon-fit";
+import { http } from "@/utils"
+import { Toast } from "antd-mobile";
+
+
+class TerminalInterface extends Component {
+  terminal = null
+  termElem = null
+  quit = '\u0003'
+  socket = null
+
+  state = {
+    terminalWidth: '',
+  }
+
+  componentDidMount() {
+
+    const content = document.querySelector('.container .content')
+    const contentStyles = window.getComputedStyle(content)
+    const contentWidth = content.clientWidth
+    const contentPaddingLeft = parseFloat(contentStyles.getPropertyValue('padding-left'))
+    this.setState({
+      terminalWidth: `${contentWidth - contentPaddingLeft}px`,
+    })
+
+    this.terminal = new Terminal()
+    const fitAddon = new FitAddon()
+    this.terminal.loadAddon(fitAddon)
+    this.terminal.open(this.termElem)
+
+    const {result, executing} = this.props
+    setTimeout(() => {
+      fitAddon.fit()
+      if (result) {
+        this.terminal && this.terminal.write(this.props.result)
+      } else if (executing) {
+        this.getAuthenticationData()
+      }
+    })
+  }
+
+  getAuthenticationData = () => {
+    http.get(`${API.home}/sys/ws/auth`).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.getLinkId(data.token)
+      } else {
+        Toast.fail(msg, 2)
+      }
+    })
+  }
+
+  getLinkId = token => {
+    http.get(`${API.home}/sys/ws/connection/${token}`).then(res => {
+      const {code, msg, data} = res.data
+      if (code === 200) {
+        this.connectServer(data.id)
+      } else {
+        Toast.fail(msg, 2, null, false)
+      }
+    })
+  }
+
+  connectServer = (id) => {
+    this.socket = new WebSocket(`${API.ws}?id=${id}`)
+    this.socket.addEventListener('open', () => {
+      console.log('opened')
+      this.socket.send(JSON.stringify({
+        data: this.props.filename,
+      }))
+    })
+    this.socket.onmessage = event => {
+      console.log(event.message)
+      this.terminal.write(event.data)
+    }
+    this.socket.onerror = () => {
+      console.log('error')
+    }
+    this.socket.onclose = () => {
+      console.log('closed')
+    }
+  }
+
+  render() {
+    const {terminalWidth} = this.state
+    return (
+      <div className={'terminal-container'}>
+        <div className={'terminal'} ref={el => this.termElem = el} style={{width: `${terminalWidth}`}}></div>
+      </div>
+    );
+  }
+}
+
+export default TerminalInterface;
\ No newline at end of file

src/components/interactive-tutorial/terminal/index.scss

+.terminal {
+  height: 141px;
+  padding: 5px;
+  background: #000;
+}
\ No newline at end of file