Vue中如何利用websocket实现实时通讯
首先我们可以先做一个简单的例子来学习一下简单的websocket模拟聊天对话的功能
原理很简单，有点像VUE中的EventBus，用emit和on传来传去
首先我们可以先去自己去用node搭建一个本地服务器
步骤如下
1.新建一个app.js，然后创建pagejson.js文件，输入以下指令
npm init -y
2.下载 express包
pnpm i express
3.在app.js里面去进行导包创建express实例
const express=require('express')
const app=express()
app.get('/',(req,res)=>{res.send('1111')
})
app.listen(2000,()=>{console.log('http://127.0.0.1:2000');
})4.重启服务器，我们可以利用postman或者其他调试接口的工具去看是否接收到了数据
注意：这个上面的ip地址要写自己本机的ip,可以在小黑窗中输入 ipconfig 获取自己的ip
5.下载socket.io包
pnpm i socket.io
6.在app.js里面导包
const express=require('express')
const app=express()
// app.get('/',(req,res)=>{
// res.send('1111')
// })
const http = require('http').createServer(app)
const io = require('socket.io')(http, { cors: true }) //创建了一个websocket服务器 并且解决了跨域
io.on('connection', (socket) => {// 客户端链接成功console.log('~connection~')})
// 客户端那边传过来的事件接收
// 注意这个地方之前的app改为http
http.listen(2000,'192.168.72.80',()=>{console.log('http://192.168.72.80:2000');
})搭建完毕后，可以去创建两个html文件
然后去做实时通信
服务器里面去接收自定义事件
然后再通过io里面的emit方法，给另外一个页面发送自定义事件，然后用socket.on去接收自定义事件，代码放在下面，里面的ip改成自己的，就可以实现模拟聊天功能
app.js
const express=require('express')
const app=express()
// app.get('/',(req,res)=>{
// res.send('1111')
// })
const http = require('http').createServer(app)
const io = require('socket.io')(http, { cors: true }) //创建了一个websocket服务器 并且解决了跨域
io.on('connection', (socket) => {// 客户端链接成功console.log('~connection~')// jack给rose发socket.on('handeljack',(e)=>{console.log('handeljack',e);io.emit('messageRose',e)})// rose给Jack发socket.on('handelrose',(e)=>{console.log('handelrose',e);io.emit('messageJack',e)})
})
// 客户端那边传过来的事件接收http.listen(2000,'192.168.72.80',()=>{console.log('http://192.168.72.80:2000');
})1.jack.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jack</title><script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head><body><ul></ul><input type="text" name="" id="ipt" placeholder="请输入内容"><button id="btn">点击发消息给rose</button><script>const btn = document.querySelector('#btn')const ipt = document.querySelector('#ipt')const box = document.querySelector('ul')/* 监听connect事件 */const socket = io('http://192.168.72.80:2000');socket.on('connect', () => {console.log('看到这里，表示和服务器连接上了')})const list = []socket.on('messageJack', (e) => {console.log(e);var str = ''list.push(e)list.forEach(item=>{str+=`<li>${item}</li>`})box.innerHTML=str})btn.onclick=function(){console.log(111);socket.emit('handeljack',ipt.value)}</script>
</body></html>2.rose.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rose</title><script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head><body><ul><li>1111</li></ul><input type="text" name="" id="ipt" placeholder="请输入内容"><button id="btn">点击发消息给Jack</button><script>const btn = document.querySelector('#btn')const ipt = document.querySelector('#ipt')const box = document.querySelector('ul')/* 监听connect事件 */const socket = io('http://192.168.72.80:2000');socket.on('connect', () => {console.log('看到这里，表示和服务器连接上了')})const list = []socket.on('messageRose', (e) => {console.log(e);var str = ''list.push(e)list.forEach(item=>{str+=`<li>${item}</li>`})box.innerHTML=str})btn.onclick = function () {console.log(111);socket.emit('handelrose', ipt.value)}</script>
</body></html>相关文章：
Vue中如何利用websocket实现实时通讯
首先我们可以先做一个简单的例子来学习一下简单的websocket模拟聊天对话的功能 原理很简单，有点像VUE中的EventBus，用emit和on传来传去 首先我们可以先去自己去用node搭建一个本地服务器 步骤如下 1.新建一个app.js，然后创建pagejson.js文…...
力扣解法汇总1144. 递减元素使数组呈锯齿状
目录链接： 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目： https://github.com/September26/java-algorithms 原题链接：力扣 描述： 给你一个整数数组 nums，每次 操作 会从中选择一个元素并 将该元素的…...
Spring彻头彻尾的讲解，按照Spring框架启动流程，逐步剖析问题，不再是大杂烩！
文章目录1. 定义Spring Bean篇1.1 定义Spring Bean的几种方式1.1.1 XML文件定义Spring Bean1.1.2 JavaConfig定义Spring Bean1.1.3 Component注解定义SpringBean1.2 装配Spring Bean的四种常用方式1.2.1 手动装配 XML文件1.2.2 自动装配 XML文件1.2.3 手动装配 JavaConfig文…...
[2]MyBatis+Spring+SpringMVC+SSM整合一套通关
二、Spring 1、Spring简介 1.1、Spring概述 官网地址：https://spring.io/ Spring 是最受欢迎的企业级 Java 应用程序开发框架，数以百万的来自世界各地的开发人员使用 Spring 框架来创建性能好、易于测试、可重用的代码。 Spring 框架是一个开源的 Jav…...
Javascript的API基本内容（三）
一、事件流 假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父实际工作都是使用事件冒泡为主 二、页面加载事件 加载外部资源（如图片、外联CS…...
【Python入门第十九天】Python 函数
函数是一种仅在调用时运行的代码块。 可以将数据（称为参数）传递到函数中。 函数可以把数据作为结果返回。 创建函数 在 Python 中，使用 def 关键字定义函数： 实例 def my_function():print("Hello from a function&quo…...
web前端性能优化
3.性能检测 当面对具体的项目实践时，该如何快速提升性能体验呢？或者说如何能够准确地定位到性能瓶颈呢？难道要比对着优化知识点清单，一项一项手动排查或完全凭借经验去处理吗？不，我们需要有一整套清晰科学…...
Telnet 基础实验2： SSH 实验
Telnet 基础实验2： SSH 实验 本实验只能使用 eNSP中 AR 系统的路由器做 拓扑图 SSH ： Secure Shell 是一个网络安全协议，基本于 TCP 协议 22 端口传输数据，通过对网络数据的加密，使其能够在一个不安全的网络环境中&a…...
Panda Farm：首个部署在 Arbitrum 上的轻量化 GameFi 游戏
在2月16日，Bitget平台宣布 Launchpad 重新启动，并推出了重启后的首个项目 Panda Farm（BBO），该 Launchpad 启动后得到了较高的关注。 Panda Farm 是部署在 Arbitrum 上的 GameFi应用，这可能首先意味着 Bitge…...
Redis实现分布式锁
1、使用背景几乎每个互联网公司中都使用了分布式部署，分布式服务下，就会遇到对同一个资源的并发访问的技术难题，如秒杀、下单减库存等场景。这些场景有一个共同特点就是访问量激增，虽然在系统设计时会通过限流、异步、排队等方式优…...
刷题小抄1-2数之和
时间复杂度和空间复杂度 对于一个算法高效性的评估,分为时间复杂度与空间复杂度两种,在算法优化到极致的情况下,只能舍弃时间来换取空间,或者舍弃空间来换取时间,故而两者可以说是互斥关系 时间复杂度衡量的是算法运行的速度,而空间复杂度衡量的是算法运行所需要的额外内存空…...
axicom的测试文档
目录）SQLpython开放性业务题（二选一）完整代码SQL 问题描述 SQL， 请根据前一周各产品的总GMV将其分成五类：GMV Top 20%、20%-40%，40%-60%，60%-80%以及Bottom 20%的产品组，请计算这五…...
基于vue3异步组件、动态组件、vite批量导入实现路由权限动态管理（非addRoute方案）
开发后台管理系统必备的需求：动态菜单权限管理、或者说路由权限动态管理 原理是通过addRoute实现路由权限控制，一般分为两种： 后端生成当前用户相应的路由后由前端（用 Vue Router 提供的API）addRoutes 动态加载路由前…...
带中转hub的卡车无人机车辆路径问题
本文介绍了两类无人机卡车协同配送问题： 第一类是旅行商问题，也即一辆卡车拉着一架无人机服务给定的节点集合第二类是车辆路径问题，这里强制要求了一架卡车只能搭配一架无人机无人机卡车旅行商问题 符号列表： N N N：表示所有节点集合，含起始和终止节点M M M...
前端食堂技术周刊第 72 期：Signals 是前端框架的未来、Chrome Headless、ts-reset、magic-regexp、Bun 新文档
美味值：🌟🌟🌟🌟🌟 口味：草莓番茄 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly 本期摘要 Signals 是前端框架的未来Chrome Headless 进化成完全体Next.js 13.2Deno…...
mysql中用逗号隔开的字段作查询用(find_in_set的使用)
mysql中用逗号隔开的字段作查询用(find_in_set的使用) 场景说明 在工作中，经常会遇到一对多的关系。想要在mysql中保存这种关系，一般有两种方式，一种是建立一张中间表，这样一条id就会存在多条记录。或者采用第二种方式ÿ…...
Day902.Memory存储引擎 -MySQL实战
Memory存储引擎 Hi，我是阿昌，今天学习记录的是关于Memory存储引擎的内容。 两个 group by 语句都用了 order by null，为什么使用内存临时表得到的语句结果里，0 这个值在最后一行； 而使用磁盘临时表得到的结果里&…...
Linux(Centos)安装RabbitMQ+延时插件+开机自启动
安装目录1：前言1.1 系统环境1.2：安装版本1.3 简介2：安装2.1：安装前准备：2.2：安装Erlang2.3：安装RabbitMQ2.3：延迟依赖插件安装1：前言 1.1 系统环境 操作系统版本&#…...
最近是遇到了CKPT(BLOCKED）
半夜被电话吵醒，数据库不可用了，无法交易。 远程登录查看，这个时候就没有所谓的安全不安全了，都可以远程了。 onstat - 数据库处于CKPT(REQ) CKPT：BLOCKED状态 onstat -l 发现所有的逻辑日志都是U------状态ÿ…...
RabbitMQ死信队列
目录 一、概念 二、出现死信的原因 三、实战 （一）代码架构图 （二）消息被拒 （三）消息TTL过期 （四）队列达到最大长度 一、概念 先从概念解释上搞清楚这个定义，死信&…...
Word控件Spire.Doc 【书签】教程(1)：在C#/VB.NET：在 Word 中插入书签
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下，轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具，专注于创建、编辑、转…...
微服务框架-学习笔记
1 微服务架构介绍 1.1 系统架构演变历史 单体架构垂直应用架构：按照业务线垂直划分分布式架构：抽出业务无关的公共模块SOA架构：面向服务微服务架构：彻底的服务化1.2 微服务架构概览 1.3 微服务架构核心要素 服务治理࿱…...
实验心理学笔记01：引论
原视频链接： https://www.bilibili.com/video/BV1Qt41137Kv 目录 一、实验心理学：定义、内容及简要历史回顾 二、实验心理学和普通心理学、认知心理学的区别 三、实验方法与非实验方法 四、实验范式 五、实验中的各种变量 六、The science of psy…...
预备3-如何学习编程
如何学习编程 我说说曾经学习编程踩得坑 纠结字面上的意思 如纠结一个关键词的名称如何来 为什么叫这个名称... 只是一个简单的名称,该名称代表某一想象/行为,就好比你为啥叫张三, 千万别去深究这些...做笔记的时间比敲代码的时间还多 做笔记的原因是,自己总结归纳所学的知识, …...
操作系统权限提升(十七)之绕过UAC提权-Windows令牌概述和令牌窃取攻击
系列文章 操作系统权限提升(十二)之绕过UAC提权-Windows UAC概述 操作系统权限提升(十三)之绕过UAC提权-MSF和CS绕过UAC提权 操作系统权限提升(十四)之绕过UAC提权-基于白名单AutoElevate绕过UAC提权 操作系统权限提升(十五)之绕过UAC提权-基于白名单DLL劫持绕过UAC提权 操作系…...
【时间之外】系统管人，能行？（冷眼旁观连载之二）
上次写了在用的工具系统和痛点，基本情况都交待清楚了，春节假期很快就过去了。这次继续按照之前观察计划，谈谈对这些工具使用情况的感受，学而时习之，算是抛砖引玉，也算是个人对这项工作的总结和体会。 目录…...
【数据结构必会基础】关于树，你所必须知道的亿些概念
目录 1.什么是树 1.1浅显的理解树 1.2 数据结构中树的概念 2.树的各种结构概念 2.1 节点的度 2.2 根节点/叶节点/分支节点 2.3 父节点/子节点 2.4祖先节点/子孙节点 2.5兄弟节点 2.6树的度 2.7节点的层次 2.8森林 3. 如何用代码表示一棵树 3.1链式结构 3.1.1 树节…...
设计模式的应用（已在大型项目中使用）
说明：开发语言：在本文中，使用的是C# 一、目录 •1 、单例模式 •2 、简单工厂模式 •3 、代理模式 •4 、观察者模式 •5 、外观模式 •6 、享元模式 •7 、命令模式 •8 、状态模式 •9 、发布订阅模式...
Git的相关用法
1.全局设置自己的git提交用户名和邮箱git config --global user.name 张三 git config --global user.email zsgmail.com即所有的提交都会用这个姓名和邮箱。如果不知道自己配置的是什么，可以查询下git config --global user.name git config --global user.email 或…...
Linux服务：Nginx反向代理与负载均衡
目录 一、Nginx反向代理 1、什么是代理 2、实现反向代理实验 ①实验拓扑 ②实验目的 ③实验过程 二、反向代理负载均衡 1、反向代理负载均衡调度算法 ①轮询算法 ②加权轮询算法 ③最小连接数算法 ④ip、url 哈希算法 ⑤响应时间fair算法 2、实现反向代理负载均…...
小企业网站制作/专业网络推广公司排名
lisflood-8作为最新版的lisflood-fp版本，其最大特色是加入了支持GPU加速的fv1以及DG2模板，GPU如果想使用需要先安装cuda环境 关于运行lisflood-8，这里是指运行其源码，如果你还不需要GPU加速模板，那么只需要从下文第二…...
小程序入口文件/window优化大师
shell脚本批量创建用户有些面试题中会问到批量创建用户的题目，大体是用循环去进行创建，但有时也会有一些额外的附加条件，一起来看看今天的知识点吧。需求：1、自定义用户，不要有特殊字符：user01,user022、最…...
佛山网站建设的首选公司/百度上传自己个人简介
5.1 整数的进制输出 print(%s%hello world) >hello world print(%o%20) # 八进制输出 >24 print(%d%20) # 十进制输出 >20 print(%x%20) # 十六进制输出 >145.2 浮点数输出 print(%.3f % 3.1415926) # 保留3位小数位 >3.142 print(%.3e % …...
网站 翻页 实现/seo关键词优化排名外包
bitsCN.commysql-utilities工具体验我主要体验了下几个关于REPLICATION的工具。先说下我的环境：MASTER: 192.168.1.131SLAVE: 192.168.1.132, 192.168.1.133三台DB都有对外的ALL权限用户。各个配置文件如下，[sql][rootmysql56-master home]# cat /etc/my…...
仿爱范儿网wordpress主题/seo服务外包公司
以前写过一个沉浸式状态栏 的实现方式 Android 沉浸式状态栏 实现方式一 现在有个更为简单的实现方式 。 相关链接 http://www.apkbus.com/forum.php?modviewthread&tid255929&extrapage%3D3%26filter%3Dsortid%26orderby%3Ddateline%26sortid%3D12 1、效果图 demo 的…...
护理学院网站建设/技术优化seo
安装selenium和python等软件尽量安装为默认安装途径...