WebSocket介绍与应用

介绍

WebSocket 是基于TCP的一种的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输。

HTTP协议和WebSocket协议对比:

  • HTTP是连接
  • WebSocket是连接
  • HTTP通信是单向的,基于请求响应模式
  • WebSocket支持双向通信
  • HTTP和WebSocket底层都是TCP连接

在这里插入图片描述
应用场景:视频弹幕、网页聊天、体育实况更新、股票基金报价实时更新……

入门案例

实现步骤:

  1. 直接使用websocket.html页面作为WebSocket客户端
  2. 导入WebSocket的maven坐标
  3. 导入WebSocket服务端组件WebSocketServer——用于和客户端通信
  4. 导入配置类WebSocketConfiguration,注册WebSocket的服务端组件
  5. 导入定时任务类WebSocketTask,定时向客户端推送数据

websocket.html页面:

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><title>WebSocket Demo</title>
</head>
<body><input id="text" type="text" /><button onclick="send()">发送消息</button><button onclick="closeWebSocket()">关闭连接</button><div id="message"></div>
</body>
<script type="text/javascript">var websocket = null;var clientId = Math.random().toString(36).substr(2);//判断当前浏览器是否支持WebSocketif('WebSocket' in window){//连接WebSocket节点websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);}else{alert('Not support websocket')}//连接发生错误的回调方法websocket.onerror = function(){setMessageInnerHTML("error");};//连接成功建立的回调方法websocket.onopen = function(){setMessageInnerHTML("连接成功");}//接收到消息的回调方法websocket.onmessage = function(event){setMessageInnerHTML(event.data);}//连接关闭的回调方法websocket.onclose = function(){setMessageInnerHTML("close");}//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。window.onbeforeunload = function(){websocket.close();}//将消息显示在网页上function setMessageInnerHTML(innerHTML){document.getElementById('message').innerHTML += innerHTML + '<br/>';}//发送消息function send(){var message = document.getElementById('text').value;websocket.send(message);}//关闭连接function closeWebSocket() {websocket.close();}
</script>
</html>

导入依赖:

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocketServer相关逻辑代码:

import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;/*** WebSocket服务*/
@Component
@ServerEndpoint("/ws/{sid}")
public class WebSocketServer {//存放会话对象private static Map<String, Session> sessionMap = new HashMap();/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("sid") String sid) {System.out.println("客户端:" + sid + "建立连接");sessionMap.put(sid, session);}/*** 收到客户端消息后调用的方法** @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, @PathParam("sid") String sid) {System.out.println("收到来自客户端:" + sid + "的信息:" + message);}/*** 连接关闭调用的方法** @param sid*/@OnClosepublic void onClose(@PathParam("sid") String sid) {System.out.println("连接断开:" + sid);sessionMap.remove(sid);}/*** 群发** @param message*/public void sendToAllClient(String message) {Collection<Session> sessions = sessionMap.values();for (Session session : sessions) {try {//服务器向客户端发送消息session.getBasicRemote().sendText(message);} catch (Exception e) {e.printStackTrace();}}}}

添加配置类:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;/*** WebSocket配置类,用于注册WebSocket的Bean*/
@Configuration
public class WebSocketConfiguration {@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}}

定时任务类:

package com.sky.task;import com.sky.websocket.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;@Component
public class WebSocketTask {@Autowiredprivate WebSocketServer webSocketServer;/*** 通过WebSocket每隔5秒向客户端发送消息*/@Scheduled(cron = "0/5 * * * * ?")public void sendMessageToClient() {webSocketServer.sendToAllClient("这是来自服务端的消息:" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));}
}

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

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

相关文章

Vue3 + MybatisPlus实现批量删除功能

目录 一、后端 1.1 编写后端接口 1.2 编写service和其实现类 二、前端 2.1 组件加多选样式 2.2 实现多选调用的方法 2.3 编写批量删除的按钮 2.4 执行批量删除请求代码 一、后端 1.1 编写后端接口 PostMapping("/batchDelete") public CommonResult<Boo…

Python中简单正则获取百度新闻页面所有超链接示例

一、示例代码&#xff1a; import re import requestsheaders {"user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/""85.0.4183.83 Safari/537.36"} resp requests.get(http://news.…

自动化构建平台(三)Linux搭建私有的docker镜像库之Harbor的安装和使用详解

文章目录 前言一、Harbor的安装第一步&#xff1a;安装docker第二步&#xff1a;安装docker-compose第三步&#xff1a;安装Harbor 二、Harbor登录三、Harbor项目管理第一步&#xff1a;创建项目第二步&#xff1a;推送镜像 四、Harbor权限控制五、Harbor自动清理多余的镜像手动…

FPGA高端项目:FPGA基于GS2971的SDI视频接收+图像缩放,提供3套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收转HDMI输出应用本方案的SDI纯verilog图像缩放视频拼接应用本方案的SDI HLS图像缩放视频拼接应用本方案的SDI视频编码动态字符叠加输出应用本方案的SDI视频编码多路视频融合视频叠加应用FPGA的SDI…

Python实现向量自回归移动平均模型(VARMA算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 向量自回归移动平均模型&#xff08;Vector Autoregressive Moving Average, VARMA&#xff09;是一种…

《商用密码应用安全性评估管理办法》解读

根据《中华人民共和国密码法》&#xff08;以下简称《密码法》&#xff09;、《商用密码管理条例》&#xff08;以下简称《条例》&#xff09;等法律法规&#xff0c;国家密码管理局研究制定了《商用密码应用安全性评估管理办法》&#xff08;国家密码管理局令第3号&#xff09…

基于springboot实现旅游路线规划系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现旅游路线规划系统演示 摘要 随着互联网的飞速发展以及旅游产业的逐渐升温&#xff0c;越来越多人通过互联网获取更多的旅游信息&#xff0c;包括参考旅游文纪等内容。通过参考旅游博主推荐的旅游景点和规划线路&#xff0c;参考计划着自己的旅行&#xff0c…

Ubuntu整系统迁移到另一个硬盘中

以ubuntu20.04为例&#xff0c;之前使用的是1T的移动硬盘&#xff0c;每次进入后性能不太稳定&#xff0c;所以最近买了块1T的固态硬盘给我的笔记本装上了&#xff0c;但是如果重新进行各种软件安装及环境配置就太麻烦了&#xff0c;所以采用了系统迁移 1.首先制作一个Ubuntu系…

08、关于语法:resp?.data?.data 的含义与实际操作中可能遇到的问题

1、数据情况&#xff1a; 其一、从后端拿到的数据为&#xff1a; let resp.data {"data": [],"lag_mode": 3,"totol": 0 }或&#xff1a; let resp.data {"data": [],"totol": 0 }其二、目标数据为&#xff1a; // 想要…

Git保姆级使用教程

一、版本控制 1.1 团队开发问题 企业项目一般以团队形式实施开发&#xff0c;那团队开发中会出现哪些问题呢&#xff1f; 小明负责的模块就要完成了&#xff0c;就在即将Release之前的一瞬间&#xff0c;电脑突然蓝屏&#xff0c;硬盘光荣牺牲&#xff01;几个月来的努力付之…

数据库常见理论常见面试题(总结)

一、前言 这里呢&#xff0c;博主会介绍一些平时关于数据库的理论的问题&#xff0c;比如数据库的三级模式两级映射、触发器、范式、存储过程、视图等等概念知识&#xff0c;但是像索引、事务、锁等内容&#xff0c;之前的文章就讲解过了&#xff0c;这里就不作过多的介绍了&am…

android工程师面试题目,安卓开发面试宝典

一、前言 不知不觉自己已经做了几年开发了&#xff0c;由记得刚出来工作的时候感觉自己能牛逼&#xff0c;现在回想起来感觉好无知。懂的越多的时候你才会发现懂的越少。 如果你的知识是一个圆&#xff0c;当你的圆越大时&#xff0c;圆外面的世界也就越大。 最近看到很多An…

Delegate动画案例(P30 5.6delegate动画)

一、ListElement&#xff0c;ListModel&#xff0c;ListView 1. ListElement ListElement 是 QML 中用于定义列表项的元素。它可以包含多个属性&#xff0c;每个属性对应列表项中的一个数据字段。通过在 ListModel 中使用 ListElement&#xff0c;可以定义一个列表的数据模型…

【leetcode】链表分割

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家刷题&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 方法1. 不用哨兵位方法2. 用哨兵位 点击查看题目 思路: 将链表分为2个链表list1和list2&#xff0c;…

物联网边缘计算云边协同

文章目录 一、物联网云边协同1.IoT云边协同设计2.物联网平台设计3.物联网平台实现 二、部署环境1.节点配置2.版本信息 三、IoT云边协同部署1.部署Kubernetes集群2.部署KubeEdge3.部署ThingsBoard集群4.部署Node-RED边缘网关4.1.边缘网关功能4.2.部署EMQX4.2.部署Node-RED 5.配置…

(正规api接口代发布权限)短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态

短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态源头开发&#xff08;本篇禁止抄袭复刻&#xff09; 一、短视频矩阵系统开发者架构 云罗短视频矩阵系统saas化系统&#xff0c;开发层将在CAP原则基础上使用分布式架构,对此网站的整体架构采用了基于B/S三层架构模式…

Django Web架构:全面掌握Django模型字段(下)

Django Web架构 全面掌握Django模型字段&#xff08;下&#xff09; - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article…

协议和序列化反序列化

“协议”和序列化反序列化 “协议”的概念&#xff1a; “协议”本身是一种约定俗成的东西&#xff0c;由通讯双方必须共同遵从的一组约定&#xff0c;因此我们一定要将这种约定用计算机语言表达出来&#xff0c;此时双方计算机才能识别约定的相关内容 我们把这个规矩叫做“…

机器学习|决策树

左图的点是一种线性不可分的情况&#xff0c;无法拿一条直线去将进行分开。 每一个节点都代表一个决策&#xff0c;从而导致节点的分流。 最终的目标肯定是要达到分类。 但取得目标的过程是有所谓的好坏。 而这个好坏用熵/信息增益来衡量。 熵是一种用于反映系统混乱程度的物理…

思科网络设备监控

思科是 IT 行业的先驱之一&#xff0c;提供从交换机到刀片服务器的各种设备&#xff0c;以满足中小企业和企业的各种 IT 管理需求。管理充满思科的 IT 车间涉及许多管理挑战&#xff0c;例如监控可用性和性能、管理配置更改、存档防火墙日志、排除带宽问题等等&#xff0c;这需…