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自动清理多余的镜像手动…

centos(redhat)离线安装英伟达(nvidia)docker运行环境

安装docker环境 可自行百度 下载 在有网的linux环境下载 yumdownloader libnvidia-container1 \ libnvidia-container-tools \ nvidia-container-toolkit-base \ nvidia-container-toolkit安装 有依赖关系最好按照顺序安装 yum install libnvidia-container1-1.13.5-1.x8…

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;是一种…

XGB-15:调参注意事项

参数调优是机器学习中的一门黑艺术&#xff0c;一个模型的最优参数可能取决于许多情境。因此&#xff0c;要为此提供全面的指南是不可能的。 了解偏差-方差权衡Bias-Variance Tradeoff 当能允许模型变得更加复杂&#xff08;例如更深&#xff09;&#xff0c;模型具有更好的拟…

nginx 实战- 性能优化

在Web服务器的世界里&#xff0c;性能是一个永恒的话题。Nginx已经是一个非常高效的服务器了&#xff0c;但是通过一些优化措施&#xff0c;你可以让它运行得更快、处理更多的请求&#xff0c;同时使用更少的资源。本章将探讨一些提升Nginx性能的策略。 Nginx性能调优基础 优…

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

根据《中华人民共和国密码法》&#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…

强缓存和协商缓存原理,及前端如何和服务端一同控制影响浏览器缓存,以及代码实战

1.强缓存&#xff08;也称为本地缓存&#xff09;和协商缓存是Web开发中用于优化页面加载性能的两种主要缓存机制。 强缓存&#xff1a; 工作原理&#xff1a; 当客户端首次请求资源时&#xff0c;服务器会返回带有缓存控制信息的响应头&#xff0c;如Cache-Control或Expires。…

nginx反向代理,获取客户端ip

一、获取客户端ip代码 /*** description: 获取客户端IP* return string*/ public static function getClientIp(){$ip ;if(getenv(HTTP_CLIENT_IP) && strcasecmp(getenv(HTTP_CLIENT_IP),unknown)){$ip getenv(HTTP_CLIENT_IP);}else if(getenv(HTTP_X_FORWARDED_F…

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

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

算法D29 | 回溯算法5|491.递增子序列 46.全排列 47.全排列 II

491.递增子序列 本题和大家刚做过的 90.子集II 非常像&#xff0c;但又很不一样&#xff0c;很容易掉坑里。 代码随想录 视频讲解&#xff1a;回溯算法精讲&#xff0c;树层去重与树枝去重 | LeetCode&#xff1a;491.递增子序列_哔哩哔哩_bilibili 一个是去重&#xff0c;一…

在WPF MVVM 框架下实现DataGrid内容的增删查改

在WPF应用程序开发中&#xff0c;使用DataGrid控件来展示和编辑数据是一种常见的做法。Prism是一个模块化的WPF应用程序框架&#xff0c;它支持MVVM模式&#xff0c;使得实现数据操作和界面展示的分离变得更加容易。本文将指导您如何在使用Prism框架的WPF应用程序中实现DataGri…