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>
相关文章：
websocket 使用示例
websocket 使用示例 前言html中使用vue3中使用1、安装websocket依赖2、代码 vue2中使用1、安装websocket依赖2、代码 前言 即时通讯webSocket 的使用 html中使用 以下是一个简单的 HTML 页面示例，它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 …...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的水下目标检测系统（深度学习模型+UI界面+训练数据集）
摘要：本研究详述了一种采用深度学习技术的水下目标检测系统，该系统集成了最新的YOLOv8算法，并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地识别水…...
中间件 Redis 服务集群的部署方案
前言 在互联网业务发展非常迅猛的早期，如果预算不是问题，强烈建议使用“增强单机硬件性能”的方式提升系统并发能力，因为这个阶段，公司的战略往往是发展业务抢时间，而“增强单机硬件性能”往往是最快的方法。 正是在这…...
)
生成哈夫曼树C卷(JavaPythonC++Node.jsC语言)
给定长度为n的无序的数字数组，每个数字代表二叉树的叶子节点的权值，数字数组的值均大于等于1。请完成一个函数，根据输入的数字数组，生成哈夫曼树，并将哈夫曼树按照中序遍历输出。 为了保证输出的二又树中序遍历结果统一，增加以下限制:二叉树节点中，左节点权值小于等于右…...
Java代码审计安全篇-SSRF(服务端请求伪造)漏洞
前言： 堕落了三个月，现在因为被找实习而困扰，着实自己能力不足，从今天开始 每天沉淀一点点 ，准备秋招 加油 注意： 本文章参考qax的网络安全java代码审计，记录自己的学习过程，还希望各…...
入门可解释机器学习和可解释性【内容分享和实战分析】
本篇文章为天池三月场读书会《可解释机器学习》的内容概述和项目实战分享，旨在为推广机器学习可解释性的应用提供一定帮助。 本次直播分享视频和实践代码以及PP获取地址：https://tianchi.aliyun.com/specials/promotion/activity/bookclub 目录 内容分…...
Promise其实也不难
难点图解：then（）方法 ES6学习网站：ES6 入门教程 解决：回调地狱（回调函数中嵌套回调） 两个特点： （1）对象的状态不受外界影响。Promise对象代表一个异步操作&…...
吴恩达 x Open AI ChatGPT ——如何写出好的提示词视频核心笔记
核心知识点脑图如下： 1、第一讲：课程介绍 要点1： 上图展示了两种大型语言模型（LLMs）的对比：基础语言模型（Base LLM）和指令调整语言模型（Instruction Tuned LLM࿰…...
JVM从1%到99%【精选】-【初步认识】
目录 1.java虚拟机 2.JVM的位置 3.代码的执行流程 4.JVM的架构模型 5.JVM的生命周期 6.JVM的整体结构 1.java虚拟机 Java虚拟机是一台执行Java字节码的虚拟计算机,它拥有独立的运行机制,其运行的Java字节码也未必由Java语言编译而成。JVM平台的各种语言可以共享Java…...
pdf转图片（利用pdf2image包）
参考： pdf2image pip install pdf2image代码： from pdf2image import convert_from_path, convert_from_bytes import osoutput_folder ./xx/ dpi_value 600 pdf_start_page 1 # pdf显示的第一页 start_page 1 # 真实页码 prex # 图像前缀def to_…...
SwiftUI的转场动画
SwiftUI的转场动画 记录一下SwiftUI中的一些弹窗动画 import SwiftUIstruct TransitionBootCamp: View {State var showView falselet screenWidth UIScreen.main.bounds.widthlet screenHeight UIScreen.main.bounds.heightvar body: some View {ZStack(alignment: .botto…...
Trust Region Policy Optimization (TRPO)
Trust Region Policy Optimization (TRPO) 是一种强化学习算法，专门设计来改善策略梯度方法在稳定性和效率方面的表现。由 John Schulman 等人在 2015 年提出，TRPO 的核心思想是在策略优化过程中引入一个信任区域（trust region）&a…...
消息服务--Kafka的简介和使用
消息服务--Kafka的简介和使用 前言异步解耦削峰缓存1、消息队列2、kafka工作原理3、springBoot KafKa整合3.1 添加插件3.2 kafKa的自动配置类3.21 配置kafka地址3.22 如果需要发送对象配置kafka值的序列化器3.3 测试发送消息3.31 在发送测试消息的时候由于是开发环境中会遇到的…...
【c++11线程库的使用】
#include<iostream> #include<thread> #include<string> using namespace std; void hello(string msg) { for (int i 0; i < 1000; i) { cout << i; cout << endl; } } int main() { //1.创建线程 thread …...
无限debugger的几种处理方式
不少网站会在代码中加入‘debugger’，使你F12时一直卡在debugger，这种措施会让新手朋友束手无策。 js中创建debugger的方式有很多，基础的形式有： ①直接创建debugger debugger; ②通过eval创建debugger（在虚拟机中…...
数据库基础理论知识
1.基本概念 数据(Data)：数据库存储的基本对象。数字、字符串、图形、图像、音频、视频等数据库(DB)：在计算机内，永久存储、有组织、可共享的数据集合数据库管理系统(DBMS)：管理数据库的系统软件数据库系统(DBS):DBDBMSDBADBAP 数…...
华为OD机试真题-模拟目录管理-2024年OD统一考试（C卷）
题目描述： 实现一个模拟目录管理功能的软件，输入一个命令序列，输出最后一条命令运行结果。 支持命令： 1）创建目录命令：mkdir 目录名称，如mkdir abc为在当前目录创建abc目录，如果已存在同名目录则不执行任何操作。此命令无输出。 2）进入目录命令：cd 目录名称, 如cd …...
yield代码解释
目录 我们的post请求爬取百度翻译的代码 详细解释 解释一 解释二 再说一下callback 总结 发现了很多人对存在有yield的代码都不理解，那就来详细的解释一下 我们的post请求爬取百度翻译的代码 import scrapy import jsonclass TestpostSpider(scrapy.Spider):…...
C#四部曲（知识补充）
Unity跨平台原理 .Net相关 只要编写的时候遵循.NET的这些规则，就能在.NET平台下通用 各种源码→根据.NET规范编写→(虚拟机)生成CIL中间码(保存在程序集中)→转成操作系统原代码 跨语言← 跨平台↓ Unity跨平台原理（Mono） c#脚本→MonoC#编…...
Vue中的数据交互有几种方式
1. 单向数据流： Vue中的数据流是单向的，从父组件传递到子组件。父组件可以通过props将数据传递给子组件，子组件通过props接收并使用这些数据。这种方式适用于父子组件之间的简单通信。 2. 事件： 子组件可以通过触发自定义事件来…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...
密码学基础——SM4算法
博客主页：christine-rr-CSDN博客 专栏主页：密码学 📌 【今日更新】📌 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 编辑…...
未授权访问事件频发，我们应当如何应对？
在当下，数据已成为企业和组织的核心资产，是推动业务发展、决策制定以及创新的关键驱动力。然而，未授权访问这一隐匿的安全威胁，正如同高悬的达摩克利斯之剑，时刻威胁着数据的安全，一旦触发，便可…...