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的资料请关注脚本之家其它相关文章!

相关文章

  • vue+SpringBoot使用WebSocket方式

    vue+SpringBoot使用WebSocket方式

    WebSocket是一种全双工通信协议,通过HTTP升级机制建立连接,支持实时双向数据传输,示例代码展示了如何在Java Spring Boot和Vue.js中实现WebSocket服务和客户端
    2025-02-02
  • vite+vue3搭建的工程实现批量导入store的module

    vite+vue3搭建的工程实现批量导入store的module

    这篇文章主要介绍了vite+vue3搭建的工程实现批量导入store的module方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue 自定义右键样式的实例代码

    vue 自定义右键样式的实例代码

    这篇文章主要介绍了vue 自定义右键样式的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue实现JSON字符串格式化编辑器组件功能

    Vue实现JSON字符串格式化编辑器组件功能

    这篇文章主要介绍了Vue实现JSON字符串格式化编辑器组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vuex 第三方包实现数据持久化的方法

    vuex 第三方包实现数据持久化的方法

    本文主要介绍了vuex 第三方包实现数据持久化的方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue中axios的封装问题(简易版拦截,get,post)

    vue中axios的封装问题(简易版拦截,get,post)

    这篇文章主要介绍了vue中axios的封装问题(简易版拦截,get,post),需要的朋友可以参考下
    2018-06-06
  • Vue中router.beforeEach与beforeRouteEnter的区别及说明

    Vue中router.beforeEach与beforeRouteEnter的区别及说明

    这篇文章主要介绍了Vue中router.beforeEach与beforeRouteEnter的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue 解决mintui弹窗弹起来,底部页面滚动bug问题

    vue 解决mintui弹窗弹起来,底部页面滚动bug问题

    这篇文章主要介绍了vue 解决mintui弹窗弹起来,底部页面滚动bug问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 使用mockjs如何生成随机数据

    使用mockjs如何生成随机数据

    Mockjs是一个用于生成随机数据和拦截Ajax请求的库,可以与Vue和Axios结合使用,提高前端开发效率,通过在项目中引入Mock.js文件,可以模拟后端API,拦截Ajax请求并返回自定义响应,这种方法适用于在后端尚未开发完成时的前端开发测试
    2024-10-10
  • 一文详解vue生命周期在uniapp中的用法

    一文详解vue生命周期在uniapp中的用法

    在uniapp中,vue的生命周期的用法基本都得以保留,但是对于特殊的需求以及特殊的情况,uniapp还引入了一些特有的生命周期钩子,本文给大家详细介绍了vue生命周期在uniapp中的用法,感兴趣的朋友可以参考下
    2024-01-01

最新评论