vue使用webSocket更新实时天气的方法

目录
  • 前言
  • 关于 webSocket 的操作及示例:
  • webSocket
    • 1.关于 webSocket
    • 2.与 AJAX 轮的区别
    • 3.webSocket 事件
    • 4. 一个简单的示例
  • 天气更新
  • 图片素材
  • 重连机制

前言

在 vue 中使用 webSocket 做一个简单的天气实时更新模块。

关于 webSocket 的操作及示例:

1.webSocket 连接

2.接收数据

3.重连机制

webSocket

1.关于 webSocket

webSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。浏览器通过 JavaScript 向服务器发出建立 webSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

var Socket = new webSocket(url, [protocol] );

protocol 是可选的,指定了可接受的子协议

2.与 AJAX 轮的区别

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。 这种传统的模式带来很 明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5 定义的 webSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

3.webSocket 事件

4. 一个简单的示例

通过上述简单介绍,我们来创建一个 webSocket 实例试一下:

function webSocketTest() {
    if ("webSocket" in window){
        alert("您的浏览器支持 webSocket!");
        // 打开一个 webSocket
        var ws = new webSocket("ws://localhost:8080/test");
        ws.onopen = function() {
            // webSocket 已连接上,使用 send() 方法发送数据
            ws.send("发送数据");
            console.log("数据发送中...");
        };

        ws.onmessage = function (evt) {
            // 接收到的数据
            var data = evt.data;
            console.log("数据已接收...");
        };

        ws.onerror = function () {
            // 连接报错
            console.log('连接报错...');
        }

        ws.onclose = function() {
            // 关闭 webSocket
            console.log("连接已关闭...");
        };
    } else {
        // 浏览器不支持 webSocket
        alert("您的浏览器不支持 webSocket!");
    }
}

可以看出,其实 webSocket 使用方法很简单:

1.判断浏览器是否支持 webSocket;
2.创建一个 webSocket 实例;
3.罗列 webSocket 事件并在相应事件中处理相应业务即可。

在vue中使用方法一样

天气更新

此处展示一下前面说过的天气实时更新效果实现。项目框架为 vue\element。

基础代码

<!-- 布局 使用的element,直接使用即可 -->
<el-popover
        placement="bottom"
        :title="weather.title"
        trigger="hover"
        :content="weather.cont">
    <div slot="reference" class="weather">
        <img :src="weather.url" alt="">
    </div>
</el-popover>
export default {
        data() {
            return {
                weather: {
                    cityName: '',
                    title: '--市/--℃',
                    cont: '--',
                    weatherCode: '0',
                    url: ''
                }
            }
        },
        methods: {
            // 获取天气
            async getTheWeather() {
                // 先通过接口请求一次当前天气状况
                let res = await this.$Http.getWeather({});
                if(res.code === 200) {
                    // 这里将接口获取到的天气数据放入 data 中的 weather 中即可
                    ...

                    // 然后打开 websocket 实时接收
                    this.connectWebSocket();
                }
            },
            // websocket
            connectWebSocket (){
                let _this = this;
                if ("WebSocket" in window) {
                    console.log("浏览器支持 WebSocket!");
                    // 打开一个 webSocket
                    let url ='xxxxxxxxxxx'; // 给你提供数据推送的地址
                    let ws = new webSocket(`ws://${url}`);
                    // 连接成功
                    ws.onopen = function () {
                        // Web Socket 已连接上,使用 send() 方法发送数据
                        ws.send("这是发送的测试数据");
                        console.log('连接成功');
                    };
                    // 接收数据处理
                    ws.onmessage = function (evt) {
                        let received_msg = evt.data;
                        // 这里将天气数据放入 data,然后天气就更新了
                        ...
                    };
                    // 连接报错
                    ws.onerror = function () {
                        console.log('连接报错...');
                    }
                    // 连接关闭
                    ws.onclose = function () {
                        // 关闭 websocket
                        console.log("连接已关闭...");
                    }
                } else {
                    // 浏览器不支持 WebSocket
                    console.log("您的浏览器不支持 WebSocket!");
                }
            },

        },
        mounted() {
            // 获取当地天气
            this.getTheWeather();
        }
    }

图片素材

天气图片信息最好跟后端商量好天气code值,这样直接取值替换就完事了。

this.weather.url = require(`@/assets/img/weather/${weatherInfo.weatherCode}@2x.png`);

重连机制

最后,介绍一种重连机制。

简单的重连机制,直接使用 setTimeout 即可。在连接报错/连接关闭时,使用定时器定时去重新执行 connectWebSocket 方法来重连即可。但是如此操作可能会存在多个问题,因此找到一种更加优雅的插件来重连——ReconnectingWebSocket。

ReconnectingWebSocket 其实就是封装的一个带有重连机制的 webSocketTest 实例,当连接断开时,会以一种友好的方式来尝试重新连接,直到连上为止。使用方法也比较简单,直接引入然后创建即可:

// 引入
import ReconnectingWebSocket from '@/util/ReconnectingWebSocket';

export default {
    data() {
        return {
            ...
        }
    },
    methods: {
        ...
        connectWebSocket() {
            let _this = this;
                if ("WebSocket" in window) {
                    console.log("浏览器支持 WebSocket!");
                    // 打开一个 webSocket
                    let url ='xxxxxxxxxxx'; // 给你提供数据推送的地址
-                   let ws = new webSocket(`ws://${url}`); // 扔掉
+                   let ws = new ReconnectingWebSocket(`ws://${url}`); // 改成这样
                    // 连接成功
                    ws.onopen = function () {
                        // Web Socket 已连接上,使用 send() 方法发送数据
                        ws.send("这是发送的测试数据");
                        console.log('连接成功');
                    };
                    // 接收数据处理
                    ws.onmessage = function (evt) {
                        ...
                    };
                    // 连接报错
                    ws.onerror = function () {
                        console.log('连接报错...');
                    }
                    // 连接关闭
                    ws.onclose = function () {
                        // 关闭 websocket
                        console.log("连接已关闭...");
                    }
                } else {
                    // 浏览器不支持 WebSocket
                    console.log("您的浏览器不支持 WebSocket!");
                }
        }
    }
}

ReconnectingWebSocket 是单个的JS文件,网上搜索即可。

到此这篇关于vue使用webSocket更新实时天气的方法的文章就介绍到这了,更多相关vue webSocket更新实时天气内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题: 注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了... ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度....

  • websocket+Vuex实现一个实时聊天软件

    目录 前言 一.效果如图 二.具体实现步骤 1.引入Vuex 2.webscoked实现 总结 前言 这篇文章主要利用websocked 建立长连接,利用Vuex全局通信的特性,以及watch,computed函数监听消息变化,并驱动页面变化实现实时聊天. 一.效果如图 二.具体实现步骤 1.引入Vuex 代码如下(示例): //安装vuex npm install vuex //main.js 中引入 import store from './store' new Vue({ el: '#ap

  • 浅谈vue websocket nodeJS 进行实时通信踩到的坑

    先说明,我并不知道出现坑的原因是什么.我只是按照别人的写法就连上了. 我的处境是这样的 我的前台是用了 vue 全家桶,启动了一个 9527 端口. 而我的后台是用 nodeJS,启动了 8081 端口. 很明显,这种情况就出现了头疼的跨域. 贴出我的代码,如下 server.js(后台) var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(serve

  • vue 实现websocket发送消息并实时接收消息

    公司做了个数字货币行情的H5,需要用到websocket,刚好自己也不会,可以学习一下,美滋滋. 项目结合vue脚手架和websocket来搭建,主要遇到了两个问题,一个是:断开重连机制要如何处理:另外一个是:如何在页面上随时的发送消息并实时接收返回的数据,断开重连后又如何重新发送消息,接收消息 一.断开重连机制处理 (详细参考这里) 写一个重连的方法(重连方法中必须加一把锁,重连方法执行过程中不再执行重连动作,避免重复连接),然后在websocket的onclose和error中绑定重连方法,

  • vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> {{date}} </div> <!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src=&

  • vue 修改 data 数据问题并实时显示的方法

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初

  • vue+echarts实现数据实时更新

    本文实例为大家分享了vue+echarts实现数据实时更新的具体代码,供大家参考,具体内容如下 今天在管理后台新增一个图表,用了echarts,记录一下 根据数据实时更新 安装 npm install echarts --save 然后在main.js中配置一下 import echarts from 'echarts' Vue.prototype.$echarts = echarts 可以了,接下来就是在你需要用的页面写了 // html 宽高还是尽量固定吧,不然会出现一些奇奇怪怪的问题 <d

  • vue watch自动检测数据变化实时渲染的方法

    本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand

  • Vue对象赋值视图不更新问题及解决方法

    当我们需要对vue里面data数据做动态更新. 如下,实例化了Vue对象,其下vueData为data属性指向,现在我们需要由后台装载完整的data对象 现在我们需要装载更新完整的data对象,常规的赋值方式并不会引起视图的更新,双向绑定会失效. 如上图中默认broker_list为空对象,装载完之后broker_list 包含新项(ZY98) 解决办法: $.each(clientData, function (k, v) { Vue.set(vueData,k,Object.assign({

  • vue使用websocket的方法实例分析

    本文实例讲述了vue使用websocket的方法.分享给大家供大家参考,具体如下: 最近项目需要使用到websocket 但是框架是vue  网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket  我这边需求是 只需要接受就好 不需要发送 代码如下: 爬坑之路:vue里面this指向问题 第一版 使用原生js mounted(){ console.log(this)---------------------------------

  • 对angular 实时更新模板视图的方法$apply详解

    有的时候在回调里面写了更新scope的里面的内容,视图上面竟然没有同时更新,这就用到了$apply Scope的特性 接下来,看看Scope有哪些特性呢? Scope提供$watch方法监视Model的变化. Scope提供$apply方法传播Model的变化. Scope可以继承,用来隔离不同的application components和属性访问权限. Scope为Expressions的计算提供上下文. 最简单的使用方法,就是在需要传递变化的地方写上以下代码 $scope.$apply()

随机推荐