当前位置： 首页 > news >正文

websocket 使用示例

news 2026/5/27 18:11:37

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 页面示例&#xff0c;它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 …...

编程日记 2024/3/13 10:37:20

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的水下目标检测系统（深度学习模型+UI界面+训练数据集）

摘要&#xff1a;本研究详述了一种采用深度学习技术的水下目标检测系统&#xff0c;该系统集成了最新的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地识别水…...

编程日记 2024/3/13 10:35:16

中间件 Redis 服务集群的部署方案

前言 在互联网业务发展非常迅猛的早期&#xff0c;如果预算不是问题&#xff0c;强烈建议使用“增强单机硬件性能”的方式提升系统并发能力&#xff0c;因为这个阶段&#xff0c;公司的战略往往是发展业务抢时间&#xff0c;而“增强单机硬件性能”往往是最快的方法。 正是在这…...

编程日记 2024/3/13 10:34:15

生成哈夫曼树C卷(JavaPythonC++Node.jsC语言)

给定长度为n的无序的数字数组，每个数字代表二叉树的叶子节点的权值，数字数组的值均大于等于1。请完成一个函数，根据输入的数字数组，生成哈夫曼树，并将哈夫曼树按照中序遍历输出。 为了保证输出的二又树中序遍历结果统一，增加以下限制:二叉树节点中，左节点权值小于等于右…...

编程日记 2024/3/13 10:31:11

Java代码审计安全篇-SSRF(服务端请求伪造)漏洞

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计&#xff0c;记录自己的学习过程&#xff0c;还希望各…...

编程日记 2024/3/13 10:29:09

入门可解释机器学习和可解释性【内容分享和实战分析】

本篇文章为天池三月场读书会《可解释机器学习》的内容概述和项目实战分享&#xff0c;旨在为推广机器学习可解释性的应用提供一定帮助。 本次直播分享视频和实践代码以及PP获取地址&#xff1a;https://tianchi.aliyun.com/specials/promotion/activity/bookclub 目录 内容分…...

编程日记 2024/3/13 10:28:08

Promise其实也不难

难点图解&#xff1a;then&#xff08;&#xff09;方法 ES6学习网站&#xff1a;ES6 入门教程 解决&#xff1a;回调地狱&#xff08;回调函数中嵌套回调&#xff09; 两个特点&#xff1a; &#xff08;1&#xff09;对象的状态不受外界影响。Promise对象代表一个异步操作&…...

编程日记 2024/3/13 10:26:03

吴恩达 x Open AI ChatGPT ——如何写出好的提示词视频核心笔记

核心知识点脑图如下&#xff1a; 1、第一讲&#xff1a;课程介绍 要点1&#xff1a; 上图展示了两种大型语言模型&#xff08;LLMs&#xff09;的对比&#xff1a;基础语言模型&#xff08;Base LLM&#xff09;和指令调整语言模型&#xff08;Instruction Tuned LLM&#xff0…...

编程日记 2024/3/13 10:24:01

JVM从1%到99%【精选】-【初步认识】

目录 1.java虚拟机 2.JVM的位置 3.代码的执行流程 4.JVM的架构模型 5.JVM的生命周期 6.JVM的整体结构 1.java虚拟机 Java虚拟机是一台执行Java字节码的虚拟计算机,它拥有独立的运行机制,其运行的Java字节码也未必由Java语言编译而成。JVM平台的各种语言可以共享Java…...

编程日记 2024/3/13 10:22:59

pdf转图片（利用pdf2image包）

参考&#xff1a; pdf2image pip install pdf2image代码&#xff1a; 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_…...

编程日记 2024/3/13 10:21:58

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…...

编程日记 2024/3/13 10:19:56

Trust Region Policy Optimization (TRPO)

Trust Region Policy Optimization (TRPO) 是一种强化学习算法&#xff0c;专门设计来改善策略梯度方法在稳定性和效率方面的表现。由 John Schulman 等人在 2015 年提出&#xff0c;TRPO 的核心思想是在策略优化过程中引入一个信任区域&#xff08;trust region&#xff09;&a…...

编程日记 2024/3/13 10:12:44

消息服务--Kafka的简介和使用

消息服务--Kafka的简介和使用 前言异步解耦削峰缓存1、消息队列2、kafka工作原理3、springBoot KafKa整合3.1 添加插件3.2 kafKa的自动配置类3.21 配置kafka地址3.22 如果需要发送对象配置kafka值的序列化器3.3 测试发送消息3.31 在发送测试消息的时候由于是开发环境中会遇到的…...

编程日记 2024/3/13 10:10:42

【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 …...

编程日记 2024/3/13 10:09:41

无限debugger的几种处理方式

不少网站会在代码中加入‘debugger’&#xff0c;使你F12时一直卡在debugger&#xff0c;这种措施会让新手朋友束手无策。 js中创建debugger的方式有很多&#xff0c;基础的形式有&#xff1a; ①直接创建debugger debugger; ②通过eval创建debugger&#xff08;在虚拟机中…...

编程日记 2024/3/13 10:07:39

数据库基础理论知识

1.基本概念 数据(Data)&#xff1a;数据库存储的基本对象。数字、字符串、图形、图像、音频、视频等数据库(DB)&#xff1a;在计算机内&#xff0c;永久存储、有组织、可共享的数据集合数据库管理系统(DBMS)&#xff1a;管理数据库的系统软件数据库系统(DBS):DBDBMSDBADBAP 数…...

编程日记 2024/3/13 10:06:37

华为OD机试真题-模拟目录管理-2024年OD统一考试（C卷）

题目描述： 实现一个模拟目录管理功能的软件，输入一个命令序列，输出最后一条命令运行结果。 支持命令： 1）创建目录命令：mkdir 目录名称，如mkdir abc为在当前目录创建abc目录，如果已存在同名目录则不执行任何操作。此命令无输出。 2）进入目录命令：cd 目录名称, 如cd …...

编程日记 2024/3/13 10:04:34

yield代码解释

目录 我们的post请求爬取百度翻译的代码 详细解释 解释一 解释二 再说一下callback 总结 发现了很多人对存在有yield的代码都不理解&#xff0c;那就来详细的解释一下 我们的post请求爬取百度翻译的代码 import scrapy import jsonclass TestpostSpider(scrapy.Spider):…...

编程日记 2024/3/13 10:03:32

C#四部曲（知识补充）

Unity跨平台原理 .Net相关 只要编写的时候遵循.NET的这些规则&#xff0c;就能在.NET平台下通用 各种源码→根据.NET规范编写→(虚拟机)生成CIL中间码(保存在程序集中)→转成操作系统原代码 跨语言← 跨平台↓ Unity跨平台原理&#xff08;Mono&#xff09; c#脚本→MonoC#编…...

编程日记 2024/3/13 9:59:28

Vue中的数据交互有几种方式

1. 单向数据流&#xff1a; Vue中的数据流是单向的&#xff0c;从父组件传递到子组件。父组件可以通过props将数据传递给子组件&#xff0c;子组件通过props接收并使用这些数据。这种方式适用于父子组件之间的简单通信。 2. 事件&#xff1a; 子组件可以通过触发自定义事件来…...

编程日记 2024/3/13 9:58:27

Android 11开发避坑：为什么你的App获取的Wifi MAC地址总是变？手把手教你配置固定MAC

Android 11开发实战&#xff1a;彻底解决Wifi MAC地址随机化问题最近在开发一个设备管理系统时&#xff0c;遇到了一个棘手的问题&#xff1a;我们的App在Android 11设备上获取的Wifi MAC地址每次都不一样&#xff0c;导致基于MAC地址的设备识别功能完全失效。经过一周的深入研…...

编程新知 2026/5/26 3:11:57

2026在线测评系统十大量表对比：信效度与场景全解析

【30s 核心摘要】2026 年在线测评成人才管理刚需&#xff0c;信效度与场景适配成选型核心。本文聚焦十大量表&#xff0c;从信度、效度、适配场景等维度深度对比&#xff0c;重点解析问卷星、北森、金数据等主流平台的量表能力与落地效果&#xff0c;为企业、高校及机构提供科学…...

编程新知 2026/5/26 3:09:56

Rydberg原子量子门实现原理与优化技术

1. Rydberg原子平台中的量子门实现基础1.1 Rydberg原子特性与量子计算优势Rydberg原子是指外层电子被激发到高主量子数能级的原子态&#xff0c;这类原子具有三个关键特性使其成为量子计算的理想平台&#xff1a;强偶极-偶极相互作用&#xff1a;当两个原子同时处于Rydberg态时…...

编程新知 2026/5/26 3:05:50

为什么92%的DeepSeek二次开发团队在6个月内遭遇交付延迟？——基于17个真实项目的技术债务归因分析

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;为什么92%的DeepSeek二次开发团队在6个月内遭遇交付延迟&#xff1f;——基于17个真实项目的技术债务归因分析 在对17个采用DeepSeek-R1/VL模型开展定制化开发的工业级项目进行回溯审计后&#xff0c;我…...

编程新知 2026/5/26 0:56:48

全链路压测实战：双十一级别的流量，我是这样扛住的

作为一名在质量保障领域摸爬滚打多年的测试工程师&#xff0c;我深知传统的单接口压测在如今分布式架构下的无力感。当业务流量达到双十一这种脉冲式、高并发的级别时&#xff0c;任何一个非核心链路上的“短板”都可能引发系统性的雪崩。全链路压测不再是选择题&#xff0c;而…...

编程新知 2026/5/26 0:40:30

Veo 2提示词性能瓶颈诊断：基于1726组AB测试的token敏感度热力图与阈值红线预警

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Veo 2提示词编写最佳实践总览 Veo 2 是 Google 推出的高性能视频生成模型&#xff0c;其对提示词&#xff08;prompt&#xff09;的语义精度、结构清晰度和上下文控制能力高度敏感。高质量提示词并非简单堆砌关…...

编程新知 2026/5/25 23:02:48

基于IRS2092的200W D类功放设计：从PWM原理到保护电路实战

1. 项目概述与核心思路折腾音响功放&#xff0c;从经典的AB类玩到D类&#xff0c;感觉就像是从燃油车换到了电动车&#xff0c;动力响应和效率完全是两个维度。这次要聊的这块“200W Class-D Audio Power Amplifier [150115]”单板功放&#xff0c;就是一个非常典型的D类功放设…...

编程新知 2026/5/25 20:55:13

C语言(12) 指针的常见操作

指针的常见操作指针变量&#xff0c;有两方面的意思:一个指针指向的内容(数据值&#xff0c;一级)指针变量本身存储的数据 (地址值)#include <stdio.h>int main() {int a 10;int b 0 ;int c 50;int *p NULL;int *q NULL;p &a; // 对指针变量本身进行修改// 对指…...

编程新知 2026/5/25 17:46:25

基于EMA与轻量级机器学习的Wi-Fi链路质量预测实战

1. 项目概述与核心价值在工业自动化、仓储物流和智能制造等场景里&#xff0c;无线网络的稳定性正变得前所未有的重要。想象一下&#xff0c;一个自动导引运输车&#xff08;AGV&#xff09;正在执行物料搬运任务&#xff0c;或者一个机械臂正在与中央控制系统进行实时数据同步…...

编程新知 2026/5/25 17:15:08

Linux 负载均衡的 cache_nice_tries：缓存友好的迁移尝试

简介现如今服务器、嵌入式设备、工控主板普遍采用多核、NUMA 架构 CPU&#xff0c;多进程多线程并发运行模式成为常态。Linux 内核依靠调度域分层负载均衡机制&#xff0c;分散 CPU 运行压力&#xff0c;避免单核心负载过高、其余核心空闲浪费硬件算力。但任务跨核心迁移是一把…...

编程新知 2026/5/27 0:25:42