vue3中websocket用法

1.0 认识 websocket

#1.0.1 什么是 websocket

和 http 协议类似,websocket 也是是一个网络通信协议,是用来满足前后端数据通信的。

#1.0.2 websocket 相比于 HTTP 的优势

HTTP 协议:客户端与服务器建立通信连接之后,服务器端只能被动地响应客户端的请求,无法主动给客户端发送消息。

websocket 协议:客户端与服务器建立通信连接之后,服务器端可以主动给客户端推送消息了!!!

#1.0.3 websocket 主要的应用场景

需要服务端主动向客户端发送数据的场景,比如我们现在要做的智能聊天

#1.0.4 HTTP 协议和 websocket 协议对比图

1.1 vue3组合api中socket.io-client 的基本使用

#1.1.1 安装和配置 socket.io-client

参考 socket.io-client 的官方文档进行配置和使用

  1. 在项目中运行如下的命令,安装 websocket 客户端相关的包:

    npm i socket.io-client@4.0.0 -S# 如果 npm 无法成功安装 socket.io-client,可以尝试用 yarn 来装包
    # yarn add socket.io-client@4.0.0
    
  2. 在 xx.vue 组件中,从 socket.io-client 模块内按需导入 io 方法:

    // 按需导入 io 方法:调用 io('url') 方法,即可创建 websocket 连接的实例
    import { io } from 'socket.io-client'
    
  3. 事先setup中定义变量 socket,用来接收 io() 方法创建的 socket 实例:

    let socket = null
    

#1.1.2 创建和销毁 socket 实例

  1. 在 xx.vue 组件的setup onMounted生命周期函数中,创建 websocket 实例对象:

    onMounted(() => {// 创建客户端 websocket 的实例socket = io('ws://www.liulongbin.top:9999')
    })
    
  2. 在 xx.vue 组件的setup onBeforeUnmount生命周期函数中,关闭 websocket 连接销毁 websocket 实例对象

    // 组件被销毁之前,清空 sock 对象
    onBeforeUnmount(() => {// 关闭连接socket.close()// 销毁 websocket 实例对象socket = null
    })
    

#1.1.3 监听连接的建立和关闭

  1. 在 xx.vue 组件的setup  onMounted 生命周期函数中,调用 socket.on('connect', fn) 方法,可以监听到 socket 连接成功的事件:

    // 建立连接的事件
    socket.on('connect', () => console.log('connect: websocket 连接成功!'))
    
  2. 在 xx.vue 组件的 created 生命周期函数中,调用 socket.on('disconnect', fn) 方法,可以监听到 socket 连接关闭的事件:

    // 关闭连接的事件
    socket.on('disconnect', () => console.log('disconnect: websocket 连接关闭!'))
    

#1.1.4 接收服务器发送的消息

  1. 在 Chat.vue 组件的 setup  onMounted 生命周期函数中,调用 socket.on('message', fn) 方法,即可监听到服务器发送到客户端的消息:

    // 接收到消息的事件
    socket.on('message', msg => console.log(msg))
    
  2. 将服务器发送到客户端的消息,存储到 xx.vue 组件的 list 数组中:

    // 接收到消息的事件
    socket.on('message', msg => {// 把服务器发送过来的消息,存储到 list 数组中this.list.push({ name: 'xs', msg })
    })
    

#1.1.5 向服务器发送消息

  1. 客户端调用 socket.emit('send', '消息内容') 方法,即可向 websocket 服务器发送消息:

    // 提交按钮的点击事件处理函数
    const send = () => {// 如果输入的聊天内容为空,则 return 出去if (!this.word) return// 向服务器发送消息socket.emit('send', this.word)// 将用户填写的消息存储到 list 数组中this.list.push({ name: 'me', msg: this.word })// 清空文本框中的消息内容this.word = ''
    }

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

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

相关文章

介绍几个医学图像处理会议

Information Processing in Medical Imaging , IPMI ,医学图像处理最顶级的会议,两年召开一次,全球大概入选 50 篇左右,一个非常小圈子的会,据说通常是关在一个偏僻的地方开一周,会议口头报告提…

python翻译

translator.py # -*- coding: utf-8 -*- # author: inspurer(月小水长) # pc_type lenovo # create_time: 2019/4/6 15:44 # file_name: translator.py # github https://github.com/inspurer # qq邮箱 2391527690qq.co…

promise并发

一、Pomise.all的使用 Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。 let p1 new Promise((resolve, rej…

计算机视觉方面的三大国际会议是ICCV, CVPR和ECCV

ICCV的全称是International Comference on Computer Vision,正如很多和他一样的名字的会议一行,这样最朴实的名字的会议,通常也是这方面最nb的会议。ICCV两年一次,与ECCV正好错开,是公认的三个会议中级别最高的。它的举…

Scanner类+Random

引用数据类型的使用 数据类型 变量名 new 数据类型(); 变量名.方法名(); import java.util.Scanner; publicclass ScannerDemo01 { publicstaticvoid main(String[] args) { //创建Scanner引用类型的变量 Scanner sc new Scanner(System.in); //获取数字 System.out.print…

手写vue2的Lazyload

调用方式,express写个后台服务调图片,具体使用不贴了 import VueLazyload from "./modules/vue-lazyload";Vue.use(VueLazyload,{loading: http://localhost:3000/images/loading.gif,error: http://localhost:3000/images/error.jpg,preload…

nature,science上关于计算机视觉的一些原创文献

真正原始创新是怎么样的?希望这些列表对做视觉研究的朋友有些启发,希望大家能帮我补充一些,谢谢。转载请注明http://hi.baidu.com/daren007或者http://www.sciencenet.cn/blog/王中任.htm。1、D. Marr; T. Poggio.Cooperative Computation of…

webpack入门进阶调优第一章

1.1何为Webpack webpack是开源的JS模块打包工具 核心功能是解决模块之间的依赖,吧哥哥模块按照特定的规则和顺序组织在一起,最终合并为一个JS文件。这个过程叫模块打包 1.2为何需要Webpack 1.2.1何为模块 在设计程序结构时,更好的组织方…

python类的空间问题及类之间的关系

类的空间问题及类之间的关系 类的空间问题 1.何处可以添加对象属性 class A:def __init__(self,name):self.name namedef func(self,sex):self.sex sexobj A("alex") obj.age 18 # 通过__init__方法添加 print(obj.__dict__) obj1 A("wusir") obj.fun…

计算机视觉应关注的资源

来自美国帝腾大学的链接。 Camera Calibration Links to toolboxes (mostly MATLAB) for camera calibration. Paul Debevec. Modeling and Rendering Architecture from Photographs. Marc Pollefeys, Tutorial on 3D Modeling from Images,, ECCV 2000, Available here: not…

Angular 内容投影 II

内容投影是一种模式,你可以在其中插入或投影要在另一个组件中使用的内容。 简单来说,angular的内容投影就相当于vue的内容插槽slot。所有一下就能懂了。 1、单插槽内容投影 单插槽内容投影是指创建一个组件,你可以在其中投影一个组件。如果只有一个ng-content,不需要sel…

麻省理工学生发明 震惊世界

核心提示:在普拉纳夫看来,数字信息以像素的形式被限制在显示屏幕之中。他发明的"第六感装置"震惊全场,让世界为之惊叹。 MIT(麻省理工)印度裔学生Prarnav Mistry的天才发明:“第六感装置” 视频地址:http://v.youku.com…

Selenium常用API的使用java语言之13-多表单切换

在 Web 应用中经常会遇到 frame/iframe 表单嵌套页面的应用, WebDriver 只能在一个页面上对元素识别与 定位, 对于 frame/iframe 表单内嵌页面上的元素无法直接定位。 这时就需要通过 switchTo().frame()方法将当前定 位的主体切换为 frame/iframe 表单的…

yarn下载依赖慢的解决方法

首先设置npm或者yarn镜像为淘宝镜像 详情: 淘宝 NPM 镜像 npm config set registry https://registry.npm.taobao.org OR yarn config set registry https://registry.npm.taobao.org 在项目的根目录添加.npmrc 或者 .yarnrc 把镜像源设置淘宝镜像,nod…

立身成败 在于所染

唐朝有一位正直的丞相很受唐太宗的赏识,他叫魏征。他说过一句话:“立身成本在于所染”。这句话的意思就是说,一个人一生成败的关键在于交友。 孔子曰:“与善人居,如入芝兰之室,久而不闻其香,即与…

Java生鲜电商平台-优惠券系统的架构设计与源码解析

Java生鲜电商平台-优惠券系统的架构设计与源码解析 电商后台:实例解读促销系统 电商后台系统包括商品管理系统、采购系统、仓储系统、订单系统、促销系统、维权系统、财务系统、会员系统、权限系统等,各系统之间相互关联、相互依托,为前端的正…

react-router-dom v6.1.1 使用方式

v5版本例子代码 import {BrowserRouter as Router, Switch, Route} from react-router-dom import App from /App import Home from /views/Home/Home import Fast from /views/Fast/Fast import User from /views/User/Userconst BaseRouter () > {return (<Router>…

VC 2010下安装OpenCV2.4.4

说明&#xff1a; 安装平台&#xff1a;32位XP&#xff0c;VS2010&#xff1b;OpenCV 2.4.4不支持VC 6.0&#xff1b;网上有很多用CMake编译OpenCV的安装教程&#xff0c;这里建议先不要自己编译&#xff0c;如果使用预编译好的库有问题&#xff0c;再尝试自己编译。希望大家好…

vue3源码中的最长递增子序列

求解最长递增子序列是一道经典的算法题, 多数解法是使用动态规划的思想&#xff0c;算法的时间复杂度是O(); 而Vue.js内部使用的是维基百科提供的一套“贪心二分查找”的算法; 贪心算法的时间复杂度是O(n)&#xff0c;二分查找的时间复杂度是O(logn)&#xff0c;总时间复杂度…

认识“数字图像”

不同领域的人对图像的概念有着不同的理解。从工程学角度上讲&#xff0c;“图”是物体透射或反射光的分布&#xff1b;“像”是人的视觉系统对图的接收在大脑中形成的印象或认识。因此&#xff0c;图像常与光照、视觉等概念联系在一起&#xff0c;光的强弱、光的波长以及物体的…