html websocket的基本使用

html websocket的基本使用

<!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" /><style>div {width: 200px;height: 200px;border: 1px solid #30897c;}</style><title>聊天室</title></head><body><input type="text" placeholder="输入你的内容" name="" id="" /><button>发送请求</button><!-- 显示结果 --><div></div></body>
</html><script>var input = document.querySelector("input");var button = document.querySelector("button");var div = document.querySelector("div");// 演示websocket在浏览器端如何使用// H5已经直接提供了websocket的API,所以我们可以直接使用// 1.创建websocket// 参数1:websocket的服务器地址var socket = new WebSocket("ws://localhost:3000"); //看02里面端口号是多少// open:当和websocket服务器连接成功的时候触发socket.addEventListener("open", function () {div.innerHTML = "连接服务成功了!";});// 3,主动给websocket服务发送消息button.addEventListener("click", () => {var value = input.value;socket.send(value);});// 4.接受websocket服务的数据socket.addEventListener("message", (e) => {console.log(e.data);div.innerHTML = e.data;});socket.addEventListener("close", () => {console.log("服务器断开。。。");});
</script>

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

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

相关文章

【投稿】计算机-AI相关期刊/会议了解和推荐

期刊 CCF相关推荐期刊 Artificial Intelligence (AI) AI领域的旗舰刊,人家都叫AI了好叭。身边有小伙伴半年给了大修,三个审稿人,其中有两个看的非常非常详细,问了许多问题,要加一堆实验(我觉得就是相当于重做了)。大修审稿周期给了半年(我算是知道为什么顶刊都这么慢…

vue3 + TS + vite 搭建中后台管理系统(完整项目)

vue3 TS vite 搭建中后台管理系统&#xff08;完整项目&#xff09; 前言1、搭建步骤及方法2、集成多种插件功能&#xff0c;实现中后台按需使用3、新手学TS如何快速进入状态、定义TS类型4、layout搭建四款常见风格6、大屏搭建效果5、vue3Ts运营管理系统总结&#xff1a; 前言…

Python实现观察者模式

观察者模式是一种设计模式&#xff0c;其中一个对象&#xff08;称为主题&#xff09;维护一组依赖于它的对象&#xff08;称为观察者&#xff09;&#xff0c;当主题的状态发生变化时&#xff0c;它会通知所有观察者。这种模式常用于实现分布式事件处理系统。 下面是一个简单…

Scikit-Learn线性回归(三)

Scikit-Learn线性回归三&#xff1a;综合实践 1、线性回归理论回顾2、数据分析与问题提出3、简单线性回归实践4、多项式回归实践5、多元线性回归实践 1、线性回归理论回顾 2、数据分析与问题提出 3、简单线性回归实践 4、多项式回归实践 5、多元线性回归实践

C. Perfect Square(矩形旋转之后对应的坐标)

题目&#xff1a; https://codeforces.com/contest/1881/problem/C 思路&#xff1a; 旋转之后对应的坐标&#xff1a; 顺时针旋转 0 90 180 270 分别为&#xff08;i&#xff0c;j&#xff09;&#xff08;j&#xff0c;n1-i&#xff09;&#xff08;n1-i&#xff0c;n1-j&…

LeetCode每日一题 | 2397. 被列覆盖的最多行数

文章目录 题目描述问题分析程序代码&#xff08;Golang 版本&#xff09; 题目描述 原题链接 给你一个下标从 0 开始、大小为 m x n 的二进制矩阵 matrix &#xff1b;另给你一个整数 numSelect&#xff0c;表示你必须从 matrix 中选择的 不同 列的数量。 如果一行中所有的 1 …

C语言,easyx,绘制一个五边形。

#include<stdio.h> #include<easyx.h>//图形库头文件 #include<math.h>//使用三角函数引用头文件 #define PI 3.14//要使用弧度制 int main() { initgraph(800,600);//创建一个窗口&#xff0c;宽度为800&#xff0c;高度为600 setorigin(400, 300);//以…

three.js相机按照指定路线在建筑模型中漫游(支持开始,暂停)

three.js相机按照指定路线在模型中漫游&#xff08;支持开始&#xff0c;暂停&#xff09; 关键点 相机运动曲线 // 相机路线 const points [new THREE.Vector3(0, 40, 300),new THREE.Vector3(50, 40, 300),new THREE.Vector3(50, 40, 50),new THREE.Vector3(150, 40, 50),…

十三、K8S之亲和性

亲和性 一、概念 在K8S中&#xff0c;亲和性&#xff08;Affinity&#xff09;用来定义Pod与节点关系的概念&#xff0c;亲和性通过指定标签选择器和拓扑域约束来决定 Pod 应该调度到哪些节点上。与污点相反&#xff0c;它主要是尽量往某节点靠。 亲和性是 Kubernetes 中非常…

详细解读QLC SSD无效编程问题-2

作者通过SimpleSSD仿真模型&#xff0c;采用SLCQLC混合模式来开展进一步的验证工作。评估过程中&#xff0c;当写入请求到达固态硬盘时&#xff0c;首先会被写入缓存&#xff08;DRAM&#xff09;&#xff0c;然后才被回写到NAND。文中引入了一个名叫做LRU(Least Recently Used…

Ajax同步调用影响加载动画展示问题

问题描述&#xff1a; 在做录入文章到时候&#xff0c;由于外部图片权限问题&#xff0c;在app展示的时候无法访问&#xff0c;所以需要在文章提交的时候做一下图片处理&#xff0c;这里使用ajax同步上传到服务器 返回url替换掉 原来的img的src&#xff1b;问题出现在点提交的…

微机原理练习题答案 13

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。) 1、十六进制数5BF.C8转换成二进制数是(C) A. 11011100111111101B B. 010111011011.01101B C. 010110111111.11001B D. 010111011011.11001B 2,最适合进行加减操作的数字编…

【Unity中的A星寻路】Navigation导航寻路系统四大页签详解

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Nginx(十七) 日志轮训/切割

1.编写shell脚本 Nginx_Log_Path"/usr/local/nginx/logs/" Dateformatdate %Y%m%d mv ${Nginx_Log_Path}/access.log ${Nginx_Log_Path}/access-${Dateformat}.log mv ${Nginx_Log_Path}/access_8688.log ${Nginx_Log_Path}/access_8688-${Dateformat}.log mv ${Ngi…

几种读nii图像方法的轴序比较

读 .nii / .nii.gz 图像并转成 numpy 可用 medpy.io、nibabel、itk、SimpleITK 几种方法&#xff0c;然而几种方法读出来的轴序有出入&#xff0c;本篇比较此几种方法。 Datum 所用数据来自 verse&#xff0c;经 iTomxy/data/verse/preprocess.py 预处理&#xff0c;朝向和轴…

【观察】Aginode安捷诺:坚守“长期主义”,服务中国数字经济

毫无疑问&#xff0c;随着整个社会加速数字化转型&#xff0c;尤其是5G、人工智能、大数据等技术兴起&#xff0c;以及智慧医疗、智慧金融、智能制造等应用加速落地&#xff0c;算力网络在经济社会发展中扮演了愈来愈重要的角色&#xff0c;成为支撑数字经济蓬勃发展的“新引擎…

2023-2024年度安徽省职业院校技能大赛(中职组) 网络空间安全竞赛试题

2023-2024年度安徽省职业院校技能大赛&#xff08;中职组&#xff09; 网络空间安全竞赛试题 &#xff08;总分 1000 分&#xff09; 赛题说明 一、竞赛项目简介 “网络安全”竞赛共分 A.基础设施设置与安全加固&#xff1b;B.网络安全事件响应、数字取证调查和应用安全&#…

根本记不住MySQL进阶查询语句

1 MySQL进阶查询 1.1 MySQL进阶查询的语句 全文以数据库location和Store_Info为实例 ---- SELECT ----显示表格中一个或数个字段的所有数据记录 语法&#xff1a;SELECT "字段" FROM "表名"; select 列名 from 表名 ; ---- DISTINCT ----不显示重复的数…

高清网络视频监控平台的应用-城市大交通系统视联网

目 录 一、应用需求 二、系统架构设计 三、功能介绍 1.实时视频监控 2.云台控制 3.语音功能 4. 录像管理与回放 5.告警联动 6.多种显示终端呈现 &#xff08;1&#xff09;CS客户端 &#xff08;2&#xff09;web客户端 &#xff08;3&#xf…

seo分享:慎重使用蜘蛛池

其实要提高搜索引擎蜘蛛的来访次数&#xff0c;唯一的方法还是要通过网站本身的内容更新。频繁更新有质量的内容&#xff0c;才能够提高蜘蛛的来访次数。如果本身内容更新不多&#xff0c;外部引流的蜘蛛过多&#xff0c;最终发现没什么内容索引&#xff0c;蜘蛛来访的次数也会…