为什么需要websocket?

一、为什么需要websocket?

  前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中。如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷。

       因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等。

 

websocket其他特点如下:

(1)建立在 TCP 协议之上,服务器端的实现比较容易。

(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

(3)数据格式比较轻量,性能开销小,通信高效。

(4)可以发送文本,也可以发送二进制数据。

(5)没有同源限制,客户端可以与任意服务器通信。

(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

二、vue项目如何引用websocket?

vue使用websocket需要注意以下几点:

(1)首先需要判断浏览器是否支持websocket,关于如何解决兼容性问题可以参考 这里这里

 

(2)在组件加载的时候连接websocket,在组件销毁的时候断开websocket

(3)后端接口需要引入socket模块,否则不能实现连接

完整代码: 

<template><div><button @click="send('你要发送的数据')">发消息</button></div>
</template><script>
export default {data () {return {path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",socket:""}},mounted () {// 初始化this.init()},methods: {init: function () {if(typeof(WebSocket) === "undefined"){alert("您的浏览器不支持socket")}else{// 实例化socketthis.socket = new WebSocket(this.path)// 监听socket连接this.socket.onopen = this.open// 监听socket错误信息this.socket.onerror = this.error// 监听socket消息this.socket.onmessage = this.getMessage}},open: function () {console.log("socket连接成功")},error: function () {console.log("连接错误")},getMessage: function (msg) {console.log(msg.data)},// 发送消息给被连接的服务端send: function (params) {this.socket.send(params)},close: function () {console.log("socket已经关闭")}},destroyed () {// 销毁监听this.socket.onclose = this.close}
}
</script><style></style>

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/54545.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【滑动窗口】leetcode1004:最大连续1的个数

一.题目描述 最大连续1的个数 这道题要我们找最大连续1的个数&#xff0c;看到“连续”二字&#xff0c;我们要想到滑动窗口的方法。滑动窗口的研究对象是一个连续的区间&#xff0c;这个区间需要满足某个条件。那么本题要找的是怎样的区间呢&#xff1f;是一个通过翻转0后得到…

go 正则表达式

目录 1. go 正则表达式1.1. Check if the string contains the desired value1.2. MustCompile should not be used1.3. Make the regex string always valid by QuoteMeta1.4. Find the desired word in a string by FindAllString1.5. Extract the desired word/value from a…

抖音web主页视频爬虫

需要抖音主页视频爬虫源码的发私信&#xff0c;小偿即可获得长期有效的采集程序。 比构造 s_v_web_id 验证滑块的方法更快&#xff0c;更稳定。

龙智案例:某大型零售企业如何打造高速、现代化的ITSM体系

在2023 DevOps国际峰会北京站的现场&#xff0c;我们对话了龙智咨询顾问胡若愚&#xff0c;他为我们奖助了一位零售业的大型客户是如何在数字化浪潮中&#xff0c;凭借龙智提供的Jira Service Management产品及服务&#xff0c;打造现代化ITSM平台&#xff0c;提升客户满意度。…

JVM理论知识

一、JVM内存结构 java的内存模型主要分为5个部分&#xff0c;分别是&#xff1a;JVM堆、JVM栈、本地栈、方法区还有程序计数器&#xff0c;他们的用途分别是&#xff1a; JVM堆&#xff1a;新建的对象都会放在这里&#xff0c;他是JVM中所占内存最大的区域。他又分为新生区还…

2022年09月 C/C++(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;最长上升子序列 一个数的序列bi&#xff0c;当b1 < b2 < … < bS的时候&#xff0c;我们称这个序列是上升的。对于给定的一个序列(a1, a2, …, aN)&#xff0c;我们可以得到一些上升的子序列(ai1, ai2, …, aiK)&#xff0c;这里1 < i1 < i2 &…

【中危】Apache Ivy<2.5.2 存在XXE漏洞 (CVE-2022-46751)

漏洞描述 Apache Ivy 是一个管理基于 ANT 项目依赖关系的开源工具&#xff0c;文档类型定义(DTD)是一种文档类型定义语言,它用于定义XML文档中所包含的元素以及元素之间的关系。 Apache Ivy 2.5.2之前版本中&#xff0c;当解析自身配置、Ivy 文件或 Apache Maven 的 POM 文件…

设计模式--适配器模式(Adapter Pattern)

一、什么是适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户端所期望的另一个接口。适配器模式主要用于解决不兼容接口之间的问题&#xff0c;使得原本…

Android 回退键监听

方法1&#xff1a;回调方法onBackPressed String LOG_TAG"TAG";Overridepublic void onBackPressed() {// super.onBackPressed();//注释掉这行,back键不退出activityLog.i(LOG_TAG, "onBackPressed");} 这个方法可以阻止用户点击后退键来退出程序。 一般…

numpy高级函数之where和extract函数

1 numpy.where() 函数返回输入数组中满足给定条件的元素的索引 ---------------------------------------------------- 代码&#xff1a; n1np.random.randint(10,20,10) n2np.where(n1>15) 结果&#xff1a; [17 15 19 15 12 10 16 11 15 13] #原始数组 (array([…

leetcode:338. 比特位计数(python3解法)

难度&#xff1a;简单 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;[0,1,1] 解释&#xff1a; 0…

飞天使-vim简单使用技巧

此文是记录技巧使用&#xff0c;如果想节约时间&#xff0c;可以直接看最后一个章节 vim 的介绍 vim号称编辑器之神&#xff0c;唯快不破&#xff0c;可扩展&#xff0c;各种插件满天飞。 vi 1991 vim 1.14 vim四种模式 普通模式: 移动光标&#xff0c; 删除文本&#xff0c…

百度Apollo:自动驾驶技术的未来应用之路

文章目录 前言一、城市交通二、出行体验三、环境保护四、未来前景总结 前言 随着科技的不断进步&#xff0c;自动驾驶技术正逐渐成为现实&#xff0c;颠覆着我们的出行方式。作为中国领先的自动驾驶平台&#xff0c;百度Apollo以其卓越的技术和开放的合作精神&#xff0c;正在…

购物车的删除功能 getters action mutation

购物车的删除功能应该写在getters action还是 mutation里面&#xff0c;为什么 购物车的删除功能应该写在action和mutation中&#xff0c;而不是getters中。这是因为getters主要用于获取和计算状态的派生属性&#xff0c;而不用于进行状态的修改。 getters&#xff1a;getters…

RedisDesktopManager(redis客户端,可输入用户名密码)

RedisDesktopManager&#xff08;redis客户端&#xff0c;可输入用户名密码&#xff09; Redis桌面管理器&#xff08;又名RDM&#xff09; - 是一个用于Windows&#xff0c;Linux和MacOS的快速开源Redis数据库管理应用程序。可以使用url连接或账号密码。 redis设置账号密码后…

嵌入式Linux开发教程汇总

一、文档 野火&#xff1a;https://doc.embedfire.com/products/link/zh/latest/linux/index.html正点原子&#xff1a;http://47.111.11.73/docs/boards/arm-linux/index.html百问网&#xff1a;http://download.100ask.net/books/Linux/ELADCM1/index.html 二、视频 百问网…

[论文阅读笔记26]Tracking Everything Everywhere All at Once

论文地址: 论文 代码地址: 代码 这是一篇效果极好的像素级跟踪的文章, 发表在ICCV2023, 可以非常好的应对遮挡等情形, 其根本的方法在于将2D点投影到一个伪3D(quasi-3D)空间, 然后再映射回去, 就可以在其他帧中得到稳定跟踪. 这篇文章的方法不是很好理解, 代码也刚开源, 做一…

嵌入式设备应用开发(发现需求和提升价值)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 很多做技术的同学,都会陷入到技术的窠臼之中。对于如何做具体的产品、实现具体的技术,他们可能很感兴趣。但是做出来的东西做什么用,或者说是有没有竞争力,事实上他们不是很关心…

身为一个后端程序员如何快速制作后端管理系统的UI

前言 我的专业领域在后端开发上&#xff0c;前端我仅仅是熟悉&#xff0c;但是要从头开发一个前端UI界面有点难为人了。那么身为一个后端程序员我们怎么来开发后端管理系统UI界面呢&#xff1f; 方案1&#xff1a;现成的模版来套&#xff08;有一定的前端基础&#xff0c;只是…

搭建开发环境-Mac

概述 上一篇搭建开发环境-WSLUbuntu 记录了WSL 和Ubuntu 下开发环境的搭建。这一篇就说下Mac开发环境的搭建。 就像很多人误以为Mini 是专为女孩子设计的高颜值车&#xff0c;其实是一辆极其hardcore 的拉力车一样。 很多人都被Mac 那高颜值蒙蔽了&#xff0c;其实这是一台生产…