vue使用websocket概念及示例

 更新时间:2022年09月22日 09:11:46   作者:小小程序员。  
这篇文章主要为大家介绍了vue使用websocket概念及示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

概念部分:

1,WebSocket 是 HTML5 提供的 TCP 连接上进行全双工通讯的协议。一次握手之后,服务器和客户端可以互相主动通信,双向传输数据。

2,浏览器想服务器发送请求,建立连接之后,可通过send()方法想服务器发送数据,并通过message事件接受服务器返回的数据。

使用示例

<script>
export default {
  mounted() {
    this.connectWebsocket();
  },
  methods: {
    connectWebsocket() {
      let websocket;
      if (typeof WebSocket === "undefined") {
        console.log("您的浏览器不支持WebSocket");
        return;
      } else {
        let protocol = "ws";
        let url = "";
        if (window.localtion.protocol == "https:") {
          protocol = "wss";
        }
        // `${protocol}://window.location.host/echo`;
        url = `${protocol}://localhost:9998/echo`;

        // 打开一个websocket
        websocket = new WebSocket(url);
        // 建立连接
        websocket.onopen = () => {
          // 发送数据
          websocket.send("发送数据");
          console.log("websocket发送数据中");
        };
        // 客户端接收服务端返回的数据
        websocket.onmessage = evt => {
          console.log("websocket返回的数据:", evt);
        };
        // 发生错误时
        websocket.onerror = evt => {
          console.log("websocket错误:", evt);
        };
        // 关闭连接
        websocket.onclose = evt => {
          console.log("websocket关闭:", evt);
        };
      }
    }
  }
};
</script>

以上就是vue使用websocket概念及示例的详细内容,更多关于vue使用websocket的资料请关注脚本之家其它相关文章!

相关文章

  • 用electron 打包发布集成vue2.0项目的操作过程

    用electron 打包发布集成vue2.0项目的操作过程

    这篇文章主要介绍了用electron 打包发布集成vue2.0项目的操作步骤,把electron 加入到自己项目中各种不兼容,升级版本踩坑无数个,今天通过本文给大家分享下详细过程,需要的朋友可以参考下
    2022-10-10
  • 从0搭建vue-cli4脚手架

    从0搭建vue-cli4脚手架

    这篇文章主要介绍了从0搭建vue-cli4脚手架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)

    vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)

    这篇文章主要给大家介绍了关于vue.js内部自定义指令与全局自定义指令的实现方法,vue.js中实现自定义指令的主要是利用directive,directive这个单词是我们写自定义指令的关键字,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-07-07
  • vue项目首屏打开速度慢的解决方法

    vue项目首屏打开速度慢的解决方法

    这篇文章主要介绍了vue项目首屏打开速度慢的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue 设置图片不转为base64的方式

    Vue 设置图片不转为base64的方式

    这篇文章主要介绍了Vue实现设置图片不转为base64的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-02-02
  • vue实现短信验证码输入框

    vue实现短信验证码输入框

    这篇文章主要为大家详细介绍了vue实现短信验证码输入框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • Vue2异步更新及nextTick原理详解

    Vue2异步更新及nextTick原理详解

    Vue2的异步更新机制是基于JavaScript的事件循环机制实现的。nextTick方法则是在DOM更新后执行回调函数。本文详细介绍了Vue2的异步更新机制和nextTick原理,对于理解Vue2的渲染机制和优化性能有很大的帮助。
    2023-04-04
  • vue如何实现在线编辑excel

    vue如何实现在线编辑excel

    这篇文章主要介绍了vue如何实现在线编辑excel问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue组件传递对象中实现单向绑定的示例

    vue组件传递对象中实现单向绑定的示例

    下面小编就为大家分享一篇vue组件传递对象中实现单向绑定的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue.js引入外部CSS样式和外部JS文件的方法

    vue.js引入外部CSS样式和外部JS文件的方法

    这篇文章主要介绍了vue.js引入外部CSS样式和外部JS文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论