【HTML5-webscoket实时通信(web)】
- websocket是什么?
就是用来创建网络聊天室,实时通信 - websocket的方法有哪些?
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets - 如何实现:(以下实现流程)
前端:
// 直播中// 聊天websocket()const wsurl = 'wss://...';var websocket = new WebSocket(wsurl);//注意不要加()调用函数,不然会立即调用会报错websocket.onopen = websocketonopen;websocket.onmessage = websocketonmessage;websocket.onerror = websocketonerror;websocket.onclose = websocketonclose;//发送按钮事件$('.sendBtn').click(()=>{send()})// 发送消息function send(){//获取输入框的内容content = $('#content').val()let data = {fd:fd,content:content,courseid: courseid,uid:uid,user_nickname:user_nickname,avatar:avatar,liveuid:liveuid,type:'msg'};//data看需求传什么值,同时与后端协调要什么websocket.send(JSON.stringify(data));//重置输入框$('#content').val('')}// 获取消息function websocketonmessage(e){var data = JSON.parse(e.data);if(data.type =='login'){console.log(data.fd+'进入了聊天室')}if(data.type=='close'){console.log(data.fd+'离开了聊天室')}if(data.type=='msg'){var recev_msg = JSON.parse(data.data);//往页面放发送和接受的消息messageItem(recev_msg.uid,recev_msg)}if(data.type=='num'){console.log(data)}fd = data.fd;if(data.type=='login'){console.log(data.num)// this.$data.msg.push(data.num);}num = data.num;//this.$data.msg.push(data);}// 建立连接function websocketonopen(e){data = {courseid: courseid,uid:uid,type:'login'// user_nickname:user_nickname,// avatar:avatar,};websocket.send(JSON.stringify(data));console.log('链接成功')// this.$data.msg.push("链接成功")}// 关闭链接function websocketonclose(e){}function websocketonerror(e){}
//通过判断uid==uidItem当前用户id和接受的消息id是不是一样的 一样就自己发送的,不一样就是别人发送的
function messageItem(uidItem,item){if(uid==uidItem){// 我发送的$('.live-discussion-content-top').append(`<div class="send-message-content"><div class="receive-message-item"><div class="receive-message-item flex align-items justify-end"><div class="receive-content"><div class="send-user-name">${item.user_nickname}</div><div class="send-content">${item.content}</div></div><div class="receive-photo"><imgsrc="${item.avatar}"alt="用户头像"></div></div></div></div>`)}else{// 接收的信息$('.live-discussion-content-top').append(`<div class="receive-message-content"><div class="receive-message-item flex align-items"><div class="receive-photo"><imgsrc="${item.avatar}"alt="用户头像"></div><div class="receive-content"><div class="user-name">${item.user_nickname}</div><div class="user-content">${item.content}</div></div></div></div>`)}}
相关文章:
【HTML5-webscoket实时通信(web)】
websocket是什么? 就是用来创建网络聊天室,实时通信websocket的方法有哪些? https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets如何实现:(以下实现流程) 前端: // 直播中// 聊天web…...
如何在Android平板上远程连接Ubuntu服务器code-server进行代码开发?
文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以,这里以VMwhere ubuntu系统为例 下载code serve…...
SAP Smartforms打印报错Error in spool C call : spool overflow
处理方式: SAP打印时提示: Error in spool C call : spool overflow (假脱机请求溢出,通俗一点打印池已满) 解决办法: SE38 首先运行程序RSPO1041 再运行RSPO1043,话不多说上图。...
SQL 中的运算符与别名:使用示例和语法详解
SQL中的IN运算符 IN运算符允许您在WHERE子句中指定多个值,它是多个OR条件的简写。 示例:获取您自己的SQL Server 返回所有来自’Germany’、France’或’UK’的客户: SELECT * FROM Customers WHERE Country IN (Germany, France, UK);语…...
3.2 CPU的自动化
CPU的自动化 改造1-使用2进制导线改造2根据整体流程开始改造指令分析指令MOV_A的开关2进制表格手动时钟gif自动时钟gif 根据之前的CPU内部结构改造,制造一个cpu控制单元 改造一 之前的CPU全由手动开关自己控制,极度繁琐,而开关能跟二进制一一对应, 开:1, 关:0图1是之前的, …...
深入理解@Resource与@Autowired:用法与区别解析
Resource: Resource 是Java EE提供的注解,也可以在Spring中使用。它是按照名称进行注入的,默认通过属性名(通常是类名的小驼峰命名方式)或者name属性来匹配。如果找不到符合名称的bean,则会抛出异常。在使…...
高级驾驶辅助系统 (ADAS)介绍
随着汽车技术持续快速发展,推动更安全、更智能、更高效的驾驶体验一直是汽车创新的前沿。高级驾驶辅助系统( ADAS ) 是这场技术革命的关键参与者,是 指集成到现代车辆中的一组技术和功能,用于增强驾驶员安全、改善驾驶体验并协助完成各种驾驶任务。它使用传感器、摄像头、雷…...
2 使用React构造前端应用
文章目录 简单了解React和Node搭建开发环境React框架JavaScript客户端ChallengeComponent组件的主要结构渲染与应用程序集成 第一次运行前端调试将CORS配置添加到Spring Boot应用使用应用程序部署React应用程序小结 前端代码可从这里下载: 前端示例 后端使用这里介…...
[计算机网络]运输层概述
虽然我自己也不知道写在前面和前言有什么区别..... 这个系列其实是针对<深入浅出计算机网络>的简单总结,加入了一点个人的理解和浅薄见识,如果您有一些更好的意见和见解,欢迎随时协助我改正,感激不尽啦. 最近心态平和了不少, 和过去也完全做了个割舍吧,既然痛苦和压力的…...
【分布式】分布式事务及其解决方案
目录 一、分布式事务二、分布式事务的解决方案1. 全局事务(1)DTP模型(2) 两阶段提交协议(2PC)原理二阶段提交的缺点 (3)三阶段提交协议(3PC)原理 2. 基于可靠…...
【文末送书】机器学习高级实践
2023年初是人工智能爆发的里程碑式的重要阶段,以OpenAI研发的GPT为代表的大模型大行其道,NLP领域的ChatGPT模型火爆一时,引发了全民热议。而最新更新的GPT-4更是实现了大型多模态模型的飞跃式提升,它能够同时接受图像和文本的输入…...
吉他初学者学习网站搭建系列(1)——目录
文章目录 背景文章目录功能网站地址网站展示展望 背景 这个系列是对我最近周末搭建的吉他工具类平台YUERGS的总结。我个人业余爱好是自学吉他,我会在这个平台中动手集成我认为很有帮助的一些工具,来提升我的吉他水平和音乐素养,希望也可以帮…...
qgis添加arcgis的mapserver
左侧浏览器-ArcGIS地图服务器-右键-新建连接 Folder: / 展开-双击图层即可...
关于「光学神经网络」的一切:理论、应用与发展
/目录/ 一、线性运算的光学实现 1.1. 光学矩阵乘法器 1.2. 光的衍射实现线性运行 1.3. 基于Rayleigh-Sommerfeld方程的实现方法 1.4. 基于傅立叶变换的实现 1.5. 通过光干涉实现线性操作 1.6. 光的散射实现线性运行 1.7. 波分复用(WDM)实现线性运…...
【HarmonyOS】ArkTS开发@Styles装饰器和@Extend装饰器详解
文章目录 HarmonyOS详解ArkTS详解ArkTS装饰器深度解析:@Styles、@Extend、和stateStyles@Styles装饰器:优雅的组件样式定义与重用@Extend装饰器:扩展原生组件样式的利器stateStyles:多态样式的应用示例场景:装饰器的联合使用进阶应用:动态样式与交互最佳实践:样式的组织…...
Android修行手册-一个滑动旋转的弧形菜单
Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列...
数组名的理解
1.引入 int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0]; 这⾥我们使⽤ &arr[0] 的⽅式拿到了数组第⼀个元素的地址,但是其实数组名本来就是地址,⽽且是数组⾸元素的地址,我们来做个测试。 #include <stdio.…...
Robots 元标签与 X-Robots 标签
Robots Meta Tag 和 X-Robots-Tag 是两个常用的 HTML 标签,它们对观察机动爬虫和其他网络机器人很有启发性。这些标签可以控制您的网页如何被记录和显示。 什么是机器人元标记? 机器人元标记是一个 HTML 标签,它提供信息来查看电机爬虫和其…...
【数据结构实验】排序(二)希尔排序算法的详细介绍与性能分析
文章目录 1. 引言2. 希尔排序算法原理2.1 示例说明2.2 时间复杂性分析 3. 实验内容3.1 实验题目(一)输入要求(二)输出要求 3.2 算法实现3.3 代码解析3.4 实验结果 4. 实验结论 1. 引言 排序算法在计算机科学中扮演着至关重要的角色…...
微信小程序开发者工具] ? Enable IDE Service (y/N) ESC[27DESC[27C
在HBuilder运行微信小程序开发者工具报错 如何解决 打开微信小程序开发者工具打开设置--->安全设置--->服务器端口选择打开就可以啦...
10分钟搞定《Degrees of Lewdity》中文本地化:从零开始到完整汉化体验
10分钟搞定《Degrees of Lewdity》中文本地化:从零开始到完整汉化体验 【免费下载链接】Degrees-of-Lewdity-Chinese-Localization Degrees of Lewdity 游戏的授权中文社区本地化版本 项目地址: https://gitcode.com/gh_mirrors/de/Degrees-of-Lewdity-Chinese-Lo…...
百度网盘链接解析终极指南:3个高效策略突破下载限制
百度网盘链接解析终极指南:3个高效策略突破下载限制 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 百度网盘解析工具是一款开源工具,专为获取百度网盘…...
Alpamayo-R1-10B部署教程:Kubernetes集群中Alpamayo-R1-10B服务化部署方案
Alpamayo-R1-10B部署教程:Kubernetes集群中Alpamayo-R1-10B服务化部署方案 如果你正在自动驾驶研发领域探索,一定听说过NVIDIA的Alpamayo-R1-10B模型。这个拥有100亿参数的视觉-语言-动作模型,正在改变自动驾驶系统的开发方式。但你可能也遇…...
全网最简:应届生面试通关手册
文章目录前言一、面试前:简历是你的第一张脸,千万别瞎写1.1 简历的核心逻辑:用数据说话,拒绝假大空1.2 技术栈选择:贴合2026年招聘需求,不追冷门1.3 项目经历:挑“能讲清楚”的,别贪…...
万象熔炉 | Anything XL性能实测:RTX 4070显卡跑满SDXL的完整配置
万象熔炉 | Anything XL性能实测:RTX 4070显卡跑满SDXL的完整配置 想用自己电脑上的显卡,比如RTX 4070,来跑最新的SDXL大模型,生成高质量的二次元图片,是不是总感觉显存不够用,或者速度太慢? …...
Layui tab选项卡如何动态根据ID值进行程序化切换
element.tabChange() 是 Layui 官方唯一支持的程序化 tab 切换方式,需严格匹配 lay-filter 和 lay-id,且必须在 tab 渲染完成后调用,动态添加时须等 tabAdd() 回调执行完毕。element.tabChange() 是唯一可靠的切换入口直接调用 element.tabch…...
别再只看准确率了!智能代码生成的可读性=语义保真度×上下文感知度×维护者心智模型匹配度——权威公式首次披露
第一章:别再只看准确率了!智能代码生成的可读性语义保真度上下文感知度维护者心智模型匹配度——权威公式首次披露 2026奇点智能技术大会(https://ml-summit.org) 准确率(Accuracy)曾长期被默认为评估代码生成模型的核心指标&am…...
终极指南:如何在Linux上使用FSearch实现毫秒级文件搜索
终极指南:如何在Linux上使用FSearch实现毫秒级文件搜索 【免费下载链接】fsearch A fast file search utility for Unix-like systems based on GTK3 项目地址: https://gitcode.com/gh_mirrors/fs/fsearch 还在为Linux系统上缓慢的文件搜索而烦恼吗…...
告别CPU搬运工:手把手教你用PL330 DMA指令集优化Exynos 4412数据传输
告别CPU搬运工:手把手教你用PL330 DMA指令集优化Exynos 4412数据传输 在嵌入式系统开发中,数据搬运往往是性能瓶颈的关键所在。想象一下,当你设计的智能摄像头系统因为频繁的图像数据传输而出现卡顿,或者音频处理设备因为实时流处…...
黎阳之光:全域实景立体管控,重构智慧电厂与变电站数字孪生新范式
在中国制造2025与新型电力系统建设双重驱动下,发电、变电、配电环节正加速迈向全域可视、智能协同、无人值守的数字化新阶段 。传统电厂/变电站普遍存在视频割裂、定位不准、巡检低效、数据孤岛、应急滞后等痛点,已难以支撑精细化、现代化管控要求。北京…...
