webscoket part

src/components/webscoket.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="webscoket">
+        <el-row :gutter="20">
+            <el-col :span="4">
+                <el-button type="" @click="build">建立连接</el-button>
+                <el-button type="danger" @click="destory">销毁连接</el-button>
+
+            </el-col>
+            <el-col :span="4">
+                <el-input v-model="input" placeholder="请输入内容"></el-input>
+            </el-col>
+            <el-col :span="4">
+                <el-button type="primary" @click="start">推送内容</el-button>
+            </el-col>
+        </el-row>
+        <p>
+            {{result}}
+        </p>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                loftIndex: 0,
+                result: 0,
+                input: '',
+                ws: null
+            }
+        },
+        methods: {
+            build() {
+                this.ws = new WebSocket('ws://123.207.136.134:9010/ajaxchattest');
+                this.ws.onopen = () => {
+                    // Web Socket 已连接上，使用 send() 方法发送数据
+                    this.ws.send('1')
+                    console.log('数据发送中...')
+                    this.ws.onmessage = evt => {
+                        console.log('数据已接收...')
+                        this.result = evt.data;
+                    }
+                }
+            },
+            destory() {
+                this.ws.close();
+            },
+            start() {
+                this.ws.send(this.input);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .webscoket {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 20px;
+    }
+</style>

src/router/index.js

@@ -208,6 +208,10 @@ const routes = [
         path: '/poster',
         name: 'Poster',
         component: () => import( '../views/Poster.vue')
+    },  {
+        path: '/test',
+        name: 'test',
+        component: () => import( '../views/test.vue')
     }, {
         path: '*',
         name: '404',

src/views/test.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="test">
+        <h5>this is test page</h5>
+        <webscoket></webscoket> 
+    </div>
+</template>
+
+<script>
+    import webscoket from '@/components/webscoket.vue'
+    export default {
+        data() {
+            return {
+                loftIndex: 0,
+            }
+        },
+        methods: {
+            handleSelect(Id) {
+                console.log(Id);
+                
+            },
+        },
+        components: {
+            webscoket
+        }
+    }
+</script>
+
+<style scoped>
+    .test {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 20px;
+        color:#fff;
+    }
+
+</style>