Vue项目中链接websocket，做一个全局通知信息

矫情吗；* 2022-02-25 15:06 790阅读 0赞

# 首先在index.html中加上下面一段代码 #

<script>
        var websocket = null
        var localHref = window.location.host === 'localhost:9528' ? '线上服务器地址' : window.location.host
        if ('WebSocket' in window) {
          // websocket = new WebSocket('ws://线上服务器地址/webSocket')
          websocket = new WebSocket('ws://线上服务器地址/webSocket')
          // websocket = new WebSocket('ws://' + localHref + '/webSocket')
        } else {
          alert('该浏览器不支持websocket!')
        }
        websocket.onopen = function(event) {
          console.log('建立连接')
        }
        websocket.onmessage = function(event) {
          console.log('socket收到消息', event)
          console.log('收到消息:' + event.data)
          // alert('收到消息:' + event.data)
        }
        websocket.onerror = function() {
          console.log('websocket通信发生错误！')
        }
        window.onbeforeunload = function() {
          websocket.close()
        }
        websocket.onclose = function(event) {
          console.log('连接关闭')
        }
      </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，790人围观）

还没有评论，来说两句吧...

相关阅读

相关 websocket链接使用方法

是在vue中的使用，JQ也可以使用，只需要修改成JQ语法就行 initWebSocket()\{ //初始化weosocket 　　　　　　　let userID ...

谁践踏了优雅/ 2024年04月18日 20:45/ 0 赞/ 60 阅读

相关封装vue项目中的全局过滤器

故心故心故心故心小故冲啊 -------------------- 文章目录封装全局过滤器导出的函数 --------------------

小鱼儿/ 2023年01月11日 01:22/ 0 赞/ 137 阅读

相关 vue项目中使用swiper.js做一个轮播图

先看效果： ![20210413130649416.gif][] 安装swiper时，指定版本号5.4.5；否则分页器可能不显示：npm install swiper@5.

ゝ一世哀愁。/ 2022年11月18日 13:40/ 0 赞/ 154 阅读

相关 vue4 跳转外部链接_vue项目跳转到外部链接

vue项目中遇到一个打印的功能。思考之后决定点击按钮，跳转到一个HTML页面(后台写的)，利用window.print()方法调用浏览器的打印的功能。所以，现在的问题是，怎

桃扇骨/ 2022年10月26日 14:09/ 0 赞/ 19 阅读

相关 js之websocket在vue项目中使用

websocket的大致作用：对于前端工程师来说，一般是前端通过触发事件，主动发起请求来获取后台数据。但是特定情况下，需要后端服务器主动推送数据到前端。这时候普通的a

素颜马尾好姑娘i/ 2022年10月23日 11:20/ 0 赞/ 214 阅读

相关 vue项目全局中引入scss

一、概述有一个scss文件，需要应用到每一个vue文件。如果每一个vue文件写重复代码，浪费精力。关于scss的安装，请参考链接：[https://www.cnbl

朴灿烈づ我的快乐病毒、/ 2022年10月15日 11:52/ 0 赞/ 257 阅读

相关 Vue项目中链接websocket，做一个全局通知信息

首先在index.html中加上下面一段代码 <script> var websocket = null var localHre

矫情吗；*/ 2022年02月25日 15:06/ 0 赞/ 791 阅读

相关过年了，基于Vue做一个消息通知组件

前言今天除夕，在这里祝大家新年快乐！！！今天在这个特别的日子里我们做一个消息通知组件，好，我们开始行动起来吧！！！项目一览效果很简单，就是这种的小卡片似的效

红太狼/ 2021年09月07日 06:10/ 0 赞/ 328 阅读

相关 nodejs（npm）——创建全局链接

我们都知道，在使用 npm 安装包的时候，有两种模式：本地模式和全局模式。它们的区别是前者将包安装到了当前目录的node\_modules下，后者把包安装到

亦凉/ 2021年06月24日 14:00/ 0 赞/ 719 阅读

相关 HTML超链接怎么做

页超链接怎么做？html怎么加超链接？我们在阅读文章的时候，会看到文字加了一个链接，点击之后，跳到另外一个页面，很多人好奇，下面我们来讲解一下超链接怎么做？ ![for...

灰太狼/ 2021年02月01日 17:33/ 0 赞/ 792 阅读