websocket 使用示例

websocket 使用示例

  • 前言
  • html中使用
  • vue3中使用
    • 1、安装websocket依赖
    • 2、代码
  • vue2中使用
    • 1、安装websocket依赖
    • 2、代码

前言

即时通讯webSocket 的使用
在这里插入图片描述

html中使用

以下是一个简单的 HTML 页面示例,它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 WebSocket 连接、读取和关闭事件的监听。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WebSocket 示例</title><script>// 1. 创建一个 WebSocket 对象let socket = new WebSocket("ws://192.168.22.199/WebSocket/");// 2. 监听 WebSocket 连接事件socket.addEventListener("open", function (event) {console.log("连接事件成功:", event);});// 3. 监听 WebSocket 收到消息事件socket.addEventListener("message", function (event) {console.log("接收到的消息事件:", event.data);});// 4. 监听 WebSocket 关闭事件socket.addEventListener("close", function (event) {console.log("关闭WebSocket:", event);});// 5. 监听 WebSocket 出错事件socket.addEventListener("error", function (event) {console.error("WebSocket error报错:", event);});// 6、webSocket发送消息function sendMessage() {let message = document.getElementById("messageInput").value;if (message) {socket.send(message);}}</script></head><body><h1>WebSocket 示例</h1><input type="text" id="messageInput" placeholder="请输入要发送的信息" /><button onclick="sendMessage()">Send</button></body>
</html>

vue3中使用

1、安装websocket依赖

npm install websocket

2、代码

<template><div><div><button @click="send">发消息</button></div></div>
</template><script>
import { defineComponent, ref, onUnmounted, onMounted } from 'vue'export default defineComponent({name: 'coPy',setup () {const path = 'ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5'let socket = ''const open = () => {console.log('socket连接成功')}const error = () => {console.log('连接错误')}const getMessage = (msg) => {console.log(msg.data)}const send = () => {socket.send('输入成功')console.log('消息发送成功')}const close = () => {console.log('socket已经关闭')}const initWs = () => {if (typeof (WebSocket) === 'undefined') {alert('您的浏览器不支持socket')} else {// 实例化socketsocket = new WebSocket(path)// 监听socket连接socket.onopen = open// 监听socket错误信息socket.onerror = error// 监听socket消息socket.onmessage = getMessage}}onMounted(() => {initWs()})onUnmounted(() => {close()})return {}}
})
</script>
<style lang="less" scoped>
</style>

vue2中使用

1、安装websocket依赖

npm install websocket

2、代码

<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 () {this.socket.send(params)},close: function () {console.log("socket已经关闭")}},destroyed () {// 销毁监听this.socket.onclose = this.close}
}
</script><style></style>

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

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

相关文章

C++初阶:类与对象(尾篇)

目录 1. 构造函数与初始化列表1.1 对象的创建与构造函数的初始化1.2 初始化列表及构造函数存在的意义1.3 explicit关键字与构造函数的类型转换 2. static成员变量与static成员函数2.1 static成员变量2.2 static成员函数 3. 日期类流插入操作符的重载与友元3.1 友元3.2 友元函数…

基于openresty构建运维工具链实践

本文字数&#xff1a;4591字 预计阅读时间&#xff1a;25 01 导读 如今OpenResty已广泛被各个互联网公司在实际生产环境中应用&#xff0c;在保留Nginx高并发、高稳定等特性基础上&#xff0c;通过嵌入Lua来提升在负载均衡层的开发效率并保证其高性能。本文主要介绍接口鉴权、流…

前端基础——HTML傻瓜式入门(1)

该文章Github地址&#xff1a;https://github.com/AntonyCheng/html-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…

ThingsBoard Edge 安装部署

文章目录 一、概述1.官方文档2.部署说明3.安装准备3.1. 克隆服务器3.2.安装 Docker3.3.安装 Java 113.4.安装 PostgreSQL3.5.下载安装包 二、安装部署1.创建 Edge 实例2.创建数据库3.Edge 服务安装3.1.安装服务3.2.配置 Edge3.3.运行安装脚本3.4.重新启动服务 4.访问 Edge5.故障…

html canvas怎么在图片上面加文字

在HTML canvas中&#xff0c;要让文字显示在图片上方&#xff0c;你需要按照以下步骤操作&#xff1a; 首先&#xff0c;使用drawImage()方法将图片绘制到canvas上。 然后&#xff0c;使用fillText()或strokeText()方法在canvas上绘制文本。 以下是一个简单的示例代码&#…

自动驾驶---Motion Planning之构建SLT Driving Corridor

1 背景 在上篇博客《自动驾驶---Motion Planning之Speed Boundary》中,主要介绍了Apollo中Speed Boundary的一些内容,可以构造ST图得到边界信息,最后结合粗糙的速度曲线和路径曲线,即可使用优化的方法求解得到最终的轨迹信息(s,s,s,l,l,l)。 本篇博客笔者主要介绍近…

系统重构后,对项目定制开发的兼容性问题

公司自实施产品线战略以来&#xff0c;基本推翻了全部旧有业务模块。后续以标准产品二次开发的模式进行项目开发。但在涉及到一些旧有系统二期、三期升级改造过程中。不可避免的需要解决旧有系统的客户定制化开发兼容性问题。也就是旧有系统定制开发的模块不能丢弃。重新开发从…

【SQL Server】实验八 综合设计

1 实验目的 了解和掌握数据库设计的有关理论和方法。可以灵活运用数据库设计方法设计一个中小型规模的数据库。 2 实验内容 2.1 数据库概念模型设计 进行需求分析。设计数据库概念模型&#xff0c;画出E-R图。 2.2 数据库逻辑模型设计 根据数据库概念模型设计数据库的逻…

现货大宗商品交易所软件的功能介绍有演示版

现货大宗商品交易所软件是专为大宗商品交易设计的系统平台&#xff0c;其功能涵盖了交易的各个环节&#xff0c;旨在提高交易效率、降低交易成本并促进市场规范化。以下是现货大宗商品交易所软件的主要功能&#xff1a; 用户管理模块&#xff1a; 注册与登录&#xff1a;为新…

量化系统QTYX使用攻略|“盘中战法”篇——监测个股盘口异动,机器人远程提醒(更新2.8.0)...

QTYX简介‍‍‍ 股票量化交易系统QTYX是一个即可以用于学习&#xff0c;也可以用于实战炒股分析的系统。 分享QTYX系统目的是提供给大家一个搭建量化系统的模版&#xff0c;最终帮助大家搭建属于自己的系统。因此我们提供源码&#xff0c;可以根据自己的风格二次开发。 关于QTY…

Javascript抓取京东、淘宝商品数据(商品采集商品详情图片抓取)

之前用的方法&#xff1a; let temp []var lists $(#J_goodsList li.gl-item)$.each(lists,function(idx,item){ temp.push({ id:$(item).data(sku), goods_img:$(item).find(img).attr(src), goods_name:$(item).find(.p-name em).text(), market_price:$(item).fi…

洗眼镜用什么超声波清洗机洗比较好?四款黑马产品集合力荐

对于眼镜佩戴者而言&#xff0c;保持眼镜的清洁不仅关系到舒适的佩戴体验&#xff0c;更直接影响到视觉的清晰度。然而&#xff0c;传统的清洗方法往往难以彻底去除镜片上的污渍、油脂以及细菌&#xff0c;尤其是眼镜的角落和细小缝隙&#xff0c;更是清洁的死角。随着科技的发…

HDS-NAS分配资源并挂载win和linux

1、首先创建系统文件。 选择nas存储池 2、根据自己的需求创建相应的挂载方式 3、window配置 配置成功 最后即可在window系统网络位置映射网络即可&#xff0c; 格式为\\123.3.4.5\test 注&#xff1a;IP地址 4、liunx挂载方式 创建完成之后即可挂载&#xff0c;注意目的主…

数据结构——动态顺序表

数据结构的动态顺序表有以下几个操作&#xff1a;创建&#xff0c;销毁&#xff0c;初始化&#xff0c;增删查改和打印以及内存空间不够时的扩容 本文的宏定义&#xff1a; #define SeqTypeData int 1.动态顺序表的创建 typedef struct SeqListInit{//动态顺序表的创建SeqT…

面试经典-MySQL篇

一、MySQL组成 MySQL数据库的连接池&#xff1a;由一个线程来监听一个连接上请求以及读取请求数据&#xff0c;解析出来一条我们发送过去的SQL语句SQL接口&#xff1a;负责处理接收到的SQL语句查询解析器&#xff1a;让MySQL能看懂SQL语句查询优化器&#xff1a;选择最优的查询…

springboot爱看漫画小程序的设计与实现

摘 要 相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低爱看漫画的运营人员成本&#xff0c;实现了爱看漫画的标准化、制度化、程序化的管理&#xff0c;有效地防止了爱看漫画的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能够及时、…

双指针算法_复写零

题目&#xff1a; 给一个固定长度的数组arr&#xff0c;将数组中出现的每一个0都复写一遍&#xff0c;并且将其余元素都往右移动 且不要再超过数组长度的位置写入元素&#xff0c;在数组上直接修改 示例&#xff1a; 双数组模拟操作&#xff1a; 从示例来看&#xff0c;因为…

《Learning Hierarchical Modular Networks for Video Captioning》论文笔记

论文信息 原文链接&#xff1a; Learning Hierarchical Modular Networks for Video Captioning | IEEE Journals & Magazine | IEEE Xplore 原文代码 GitHub - MarcusNerva/HMN: [CVPR2022] Official code for Hierarchical Modular Network for Video Captioning. Ou…

GPT3.5、GPT4及Midjourney中转接口ChatGPT系统KEY使用方法

很多使用ChatGPT系统、还有SparkAi、NineAi等系统都存在个比较烦的问题&#xff0c;Openai API 3.5KEY 4.0KEY&#xff0c;Midjourney接口KEY都没有一个稳定的购买或者使用渠道。直连KEY买来还得得建立反代主机&#xff0c;Midjourney接口通过MJ-PROXY-PLUS系统折腾了几天也能使…

linux用git拉取我云端以及git处理冲突

拉取后切换一个跟云端分支(dev)一样的 git branch --set-upstream-toorigin/dev dev 之后就同步了 A在dev分支写了iii,提交 B在dev分支写了hhh,提交,冲突 怎么修改,B把云端的拉下来,随便改改就行