vue中WebSocket使用记录

直接上代码：

<template>
    <div class="chart">
        <div class="container">
            <el-input type="text" v-model="text" />
            <el-button @click="send">发送消息</el-button>
            
            
            <el-button @click="closeWebSocket()">关闭websocket连接</el-button>
            
            <div>{{ data }}</div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import common from '../common/common.js';

export default {
    name: 'chart',
    data() {
        return {
            
            text: '',    ////发送内容
            data: '',    ////响应数据
            websocket: null,
        };
    },
    created() {
        this.apiUrl = common.apiUrl;      ////接口

        this.token = 'Token ' + localStorage.getItem('token');  ////
token

    },
    mounted() {
        if ('WebSocket' in window) {    ////打开时判断socket连接状态
            this.websocket = new WebSocket('ws://47.94.0.83:8889/ws/chants/zyf/');
            this.initWebSocket();
        } else {
            alert('当前浏览器不支持即时聊天，请升级浏览器或更换浏览器使用！！');
        }
    },
    beforeDestroy() {    ////关闭时断开socket连接
        this.onbeforeunload();
    },

    methods: {
        initWebSocket() {    ////初始化
            //连接错误
            this.websocket.onerror = this.setErrorMessage;

            // //连接成功
            this.websocket.onopen = this.setOnopenMessage;

            //收到消息的回调
            this.websocket.onmessage = this.setOnmessageMessage;

            //连接关闭的回调
            this.websocket.onclose = this.setOncloseMessage;

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = this.onbeforeunload;
        },
        setErrorMessage() {
            this.data = 'WebSocket连接发生错误' + '   状态码：' + this.websocket.readyState;
        },
        setOnopenMessage() {
            this.data = 'WebSocket连接成功' + '   状态码：' + this.websocket.readyState;
        },
        setOnmessageMessage(event) {
            this.data = '服务端返回：' + event.data;
        },
        setOncloseMessage() {
            this.data = 'WebSocket连接关闭' + '   状态码：' + this.websocket.readyState;
        },
        onbeforeunload() {
            this.closeWebSocket();
        },

        //websocket发送消息
        send() {
            this.messages = {
                token:this.token,
                text:this.text,
            }
            
            this.websocket.send(this.text);
            // this.websocket.send(this.messages);
            this.text = '';
            // this.messages = {};
        },
        closeWebSocket() {
            this.websocket.close();
        }
    },

};
</script>

<style scoped>
.container {
    /* background: rgba(255,255,255,0); */
    border: 0;
}
.handle-box {
    border-bottom: 2px solid #999;
    padding-bottom: 10px;
}
.sheetcontent {
    margin-top: 10px;
    overflow: hidden;
    box-sizing: border-box;
}
.sheetlib {
    width: 20%;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
}
.sheetlib:hover {
    transform: scale(1.03);
}
.sheetlist {
    margin: 5px;
    padding: 5px 0 0 0;
    background: #fff;
    border: 1px solid #eee;
    overflow: hidden;
    box-sizing: border-box;
}
.sheettitle {
    padding: 10px;
}
.sheetbtn {
    cursor: pointer;
    margin-top: 10px;
    border-top: 1px solid #eee;
}
.btnli {
    width: 33.333%;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    padding: 5px;
}

.li1 {
    color: #ffd700;
}
.li2 {
    color: #9f79ee;
}
.li3 {
    color: #cd3700;
}
.btnli {
    /* background: #B4EEB4; */
    border-right: 1px solid #eee;
}
.btnli:last-child {
    /* background: #CAE1FF; */
    border-right: 0;
}
</style>