第一次使用 websocket 就是需要在 vue 中去使用他, 在网上搜索了很多如何在 vue 中使用的教程和示例, 有些 demo 过于简单扩展性太差, 有些存在 bug
网上经常被搜索到的一个答案是这个 https://blog.csdn.net/niyuelin1990/article/details/78062139#commentsedit , 但是这个答案中在解决 websocket 未开启和正在开启状态的处理方式是使用 setTimeout 去假定异步的状态, 这个处理方式是存在问题的, 于是我在这篇文章的基础上做出了一些修改, 通过在 onopen 事件和 onerror 事件中处理 websocket 未开启和正在开启状态的数据发送问题
目前使用到现在没有出现什么问题, 复制即用
- <template>
- <div class="test">
- </div>
- </template>
- <script>
- export default {
- name : 'test',
- data() {
- return {
- websock: null,
- }
- },
- created() {
- this.initWebSocket();
- },
- destroyed() {
- this.websock.close() // 离开路由之后断开 websocket 连接
- },
- methods: {
- initWebSocket(){ // 初始化 weosocket
- const wsuri = "ws://127.0.0.1:8080";
- this.websock = new WebSocket(wsuri);
- this.websock.onmessage = this.websocketonmessage;
- this.websock.onopen = this.websocketonopen;
- this.websock.onerror = this.websocketonerror;
- this.websock.onclose = this.websocketclose;
- },
- websocketonopen(){ // 连接建立之后执行 send 方法发送数据
- let actions = {"test":"12345"};
- this.websocketsend(JSON.stringify(actions));
- },
- websocketonerror(){// 连接建立失败重连
- this.initWebSocket();
- },
- websocketonmessage(e){ // 数据接收
- const redata = JSON.parse(e.data);
- },
- websocketsend(Data){// 数据发送
- this.websock.send(Data);
- },
- websocketclose(e){ // 关闭
- console.log('断开连接',e);
- },
- },
- }
- </script>
- <style lang='less'>
- </style>
来源: http://www.jianshu.com/p/9d8b2e42328c