java黑洞网 首页 博客 问答 站长公众号 pdf 视频 游戏 脚本 实战 其它资源
写博客 注册

程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

Springboot 基础5 - websocket技术

发布于2021-05-29 23:33     阅读(1069)     评论(0)     点赞(9)     收藏(1)

websocket 协议？

Websocket 协议是HTM5 协议，它的出现解决了客户端发起多个http 请求到服务器的资源浏览器必须经过长时间的轮询问题而产生的，websocket 实现了多路复用，全双工通信方式，该协议可以实现客户端和浏览器端同时发送数据。

websocket 与 http 协议的不同之处？

http 是超文本传输协议，是一个简单的请求-响应协议，通常运行在Tcp 之上。该协议是应用层协议，基于B/S 架构的通信协议。且该协议是一种无状态协议，即服务器不保留与客户端的交易的任何状态。HTTP 是一种面向连接的协议，允许传递任意类型的数据对象。

典型的HTTP 事物处理过程如下：

（1）客户端与服务器建立连接

（2）客户向服务器提出请求

（3）服务器接收请求，并根据请求返回相应的文件，作为应答。

（4）客户端与服务器关闭连接

下表中展示了websocket 协议与http协议的不同之处：

区别httpwebsocket
连接方式http1.0 即普通的http请求，一般是短连接，一次请求，三次握手，完毕之后立即断开websocket 是http 协议的升级，http1.1 默认是长连接方式，长连接代表：一次连接，在一定期限内保持连接，保持tcp不断开，双方都可以即时通讯，是一种全双工通讯协议
场景http协议更适合普通文件请求，不适合即时通讯，一般我们要得到及时信息，通过http方式，我们就需要不断轮询，网络资源消耗大websocket 更适合做即时通讯，不需要不断的轮询，一次连接，长时间有效。

 

代码实现

基于maven 构建项目工具实现：

pom.xml 导入依赖

在pom.xml 中导入 websocket 依赖，如下所示：

  1. <dependency>
  2.     <groupId>org.springframework.boot</groupId>
  3.      <artifactId>spring-boot-starter-websocket </artifactId>
  4. </dependency>

编写websocketConfig 类

  1. @Configuration
  2. public class WebSocketConfig{
  3.   /**
  4.   * @return
  5.   */
  6.   @Bean
  7.   public ServerEndpointExporter serverEndpointExporter()   {
  8.     
  9.     return new ServerEndpointExporter();
  10.   }
  11. }

实现WebSocket 协议类

  1. @ServerEndpoint("/websocket/{id}")
  2. @Component
  3. public class WebSockerServer{
  4.   
  5.   // session 会话集合
  6.   private static ConcurrentHashMap<String, Session> map = new ConcurrentHashMap<String, Session>();
  7.   
  8.   // 当前会话
  9.   private Session session;
  10.   // id
  11.   private String id = "";
  12.   
  13.   /**
  14.   * 连接，打开会话
  15.   * 
  16.   * @param session 服务器端与客户端建立连接，生成数据
  17.   * @param id 客户端的唯一id
  18.   */
  19.   @OnOpen
  20.   public void onOpen(Seesion session, @PathParam("id") String id){
  21.     
  22.     this.session = session;
  23.     this.id = id;
  24.     // 加入到map 集合中
  25.     this.map.put(this.sid, this.session);
  26.   }
  27.   
  28.   /**
  29.   * 关闭当前会话
  30.   */
  31.   @OnClose
  32.   public void onClose(){
  33.     try{
  34.       // 从名单中清除
  35.       this.map.remvoe(this.sid);
  36.       // 关闭会话
  37.       this.session.close();
  38.     } catch(IOException e){
  39.       // TODO Auto-generated catch block
  40.       e.printStackTrace()
  41.     }
  42.   }
  43.   
  44.   /**
  45.   * 接受信息
  46.   * 
  47.   * @param message 接收到信息
  48.   */
  49.   @OnMessage
  50.   public void onMessage(String message){
  51.     try{
  52.       System.out.println("message:" + message);
  53.       
  54.       // 广播数据
  55.       for(Entry<String, Session> entry: map.entrySet()){
  56.         entry.getValue().getBasicRemote().sendText(message);
  57.       }
  58.     }catch(Exception e){
  59.       e.printStackTrace();
  60.     }
  61.   }
  62.   
  63.   /**
  64.   * 发送数据
  65.   * 
  66.   * @param message 需要发送数据
  67.   */
  68.   public void sendMessage(String message){
  69.     try{
  70.       this.session.getBasicRemote().sendText(message);
  71.     }catch(Exception e){
  72.       e.printStackTrace();
  73.     }
  74.   }
  75. }

前端界面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  8.         <title>Bootstrap 101 Template</title>
  9.         <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
  10.         <script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
  11.     </head>
  12.     <body>
  13.         <div id="app">
  14.             <div class="container">
  15.                 <form action="" method="">
  16.                     <div class="row">
  17.                         <div class="form-group col-md-6">
  18.                             <label>信息展示：</label>
  19.                             <textarea class="form-control" rows="10" cols="" v-model="showContent"></textarea>
  20.                         </div>
  21.                         <div class="col-md-6">
  22.                             <div class="row">
  23.                                 <div class="form-group col-md-12">
  24.                                     <label>发送人ID：</label>
  25.                                     <input type="text" class="form-control" name="" v-model="id" />
  26.                                 </div>
  27.                             </div>
  28.                             <div class="row">
  29.                                 <div class="form-group col-md-12">
  30.                                     <label>发送信息：</label>
  31.                                     <textarea class="form-control" rows="6" cols="" v-model="sendContent"></textarea>
  32.                                 </div>
  33.                             </div>
  34.                             <div class="row">
  35.                                 <div class="form-group col-md-6">
  36.                                     <button type="button" class="btn btn-primary btn-block" @click="sendMsg()">点击发送</button>
  37.                                 </div>
  38.                                 <div class="form-group col-md-6">
  39.                                     <button type="button" class="btn btn-danger btn-block" @click="connect()">连接</button>
  40.                                 </div>
  41.                             </div>
  42.                         </div>
  43.                     </div>
  44.                 </form>
  45.             </div>
  46.         </div>
  47. ​
  48.         <script type="text/javascript">
  49.             var vm = new Vue({
  50.                 el: '#app',
  51.                 data: {
  52.                     id: '',
  53.                     showContent: '',
  54.                     sendContent: '',
  55.                     socket: null
  56.                 },
  57.                 methods: {
  58.                     connect: function() {
  59.                         var lsocket;
  60.                         if (typeof(WebSocket) == "undefined") {
  61.                             console.log("您的浏览器不支持WebSocket，请更换浏览器");
  62.                             return;
  63.                         } else {
  64.                             console.log("您的浏览器支持WebSocket");
  65.                             if (this.id.trim() == "") {
  66.                                 alert('连接之前必须指定唯一ID')
  67.                                 return
  68.                             }
  69. ​
  70.                             lsocket = new WebSocket("ws://localhost:8080/websocket/" + this.id)
  71.                             this.socket = lsocket
  72. ​
  73.                             this.socket.onopen = function() {
  74.                                 console.log('连接已开放')
  75.                             }
  76.                             this.socket.onerror = function() {
  77.                                 alert('websocket出现error')
  78.                             }
  79.                             this.socket.onmessage = function(msg) {
  80.                                 console.log(msg)
  81.                                 vm.showContent += msg.data
  82.                             }
  83.                         }
  84.                     },
  85.                     sendMsg: function() {
  86.                         if(this.sendContent.trim()==""||this.socket==null)
  87.                         {
  88.                             alert('不能发送空的信息哦，发送信息前，要先连接')
  89.                             return 
  90.                         }
  91.                         this.socket.send(this.sendContent)
  92.                         this.sendContent=''
  93.                     }
  94.                 },
  95.                 created: function() {
  96. ​
  97.                 }
  98.             })
  99.         </script>
  100.     </body>
  101. </html>

 

启动类

  1. @SpringBootApplication
  2. public  class AppWebSocket{
  3.   
  4.   public static void main(String[] args){
  5.     SpringApplication.run(App.class, args);
  6.   }
  7. }

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

java精选：SSO单点登录】JWT入门概述&&残留的安全问题

网友说：做开发，不被领导喜欢怎么办？

网友说：我奉劝各位，一定不能在职场透露自己的家庭条件



所属网站分类: 技术文章 > 博客

作者：听说你没有见过我

链接：http://www.javaheidong.com/blog/article/207793/f50f4cf1a21571a6a5f7/

来源：java黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

9 0
收藏该文
已收藏

评论内容：(最多支持255个字符)




程序员的那些事(new) 更多>

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

java精选：SSO单点登录】JWT入门概述&&残留的安全问题

网友说：做开发，不被领导喜欢怎么办？

网友说：我奉劝各位，一定不能在职场透露自己的家庭条件

电子书(new)

java jdk8 学习笔记

深入剖析Tomcat pdf下载

Java与模式 pdf下载

深入理解Java虚拟机：JVM高级特性与最佳实践(第2版) pdf 下载

数据结构与算法分析：Java语言描述(原书第3版) pdf  下载

Java并发编程实战 中文版 PDF扫描版[9MB]

数据结构与算法分析：Java语言描述(原书第3版) 中文完整pdf扫描版[47MB] 附源码

Hadoop权威指南 pdf下载

重构 改善既有代码的设计 pdf下载

JAVA编程思想 pdf下载

脚本(new)

输入一个数据n，计算斐波那契数列(Fibonacci)的第n个值

求 a+aa+aaa+.......+aaaaaaaaa=?

输出所有的水仙花数，把谓水仙花数是指一个数3位数，其各各位数字立方和等于其本身，

利用for循环打印 9*9 表?

编写程序求 1+3+5+7+……+99 的和值。

给定一个百分制的分数，输出相应的等级

编写程序，判断给定的某个年份是否是闰年

一些有趣的java小程序

菱形的图形生成器，2到100以内的质数-java实用小程序

java代码游戏编写

博客(new)

Android Studio App开发实战项目之广告轮播（附源码 可用于大作业）

【Java 基础】Java SPI 二 之 Java APT原理及APT实战 - 一步步教你写ButterKnife

Android程序设计之音乐播放器实现

原力计划

学生管理系统（Java实现）

书评 | 《深入理解高并发编程：JDK核心技术》

springboot整合sharding-jdbc实现分库分表详解

【熬夜送书 | 第三期】清华社赞助 | 《Java系列丛书》

Spring Security 6 配置方法，废弃 WebSecurityConfigurerAdapter

原力计划

视频教程(new)

由浅入深，全面解析ThreadLocal

超全面讲解Spring Cloud Alibaba技术栈，java视频教程下载

三天全面系统学习ZooKeeper

2020年JavaSE强化系列教程泛型全剖析，java视频教程下载

详讲编码与解码，灵活解决乱码难题，java 视频教程下载

2020年抗疫之作java基础进阶13天

系统学习让你轻松定义java类加载器-java视频教程下载

真小白福音，完全从0带你掌握计算机与编程基础

java零基础入门到精通（2019版）

2020JAVA基础-深入系统的学习数据结构与算法

项目实战(new)

JSP+SSM+Mysql实现的学生成绩管理系统

JSP+Structs+JDBC+mysql实现的诚欣电子商城

JSP+SSH+Mysql+DBCP实现的租车系统

博客系统java项目

这是一个在线考试系统,java项目实战源码下载

简单状态机

Java Web编程课程中开发的项目

银行账户项目样本 用Java完成的一个简单项目

一个使用Java开发在线概述用户管理平台

JAVAWeb项目 JAVA-WEB开发的一些练手项目，这些也适合初学者进行练习

问答(new)

启动一个使用Rapid miner的java项目

如何通过 Apache POI 3.9 从 xls/xlsx 读取时间格式？

如何将自定义菜单栏项放置在地图菜单中的所需位置

我们如何在 Jess 规则中从终端选择默认值

无法在远程系统上使用 Windows 身份验证连接到 MS sql 服务器

Spring - 如何选择依赖bean的属性？

Java - MousePress Hold 和 Release 事件侦听器

将分页与 Struts 2 和 Hibernate 一起使用

Java：运动，需要放慢速度

如何正确调用同一个类中的方法内的方法？

游戏(new)

2人对战游戏，java游戏

java小游戏-数学英雄

java游戏-蛙人

经典骰子游戏,java游戏源码下载

一些java小游戏

java小游戏-抓住这只球

二十一点，java小游戏源码下载

java小游戏集合下载

java五子棋游戏源码下载

java贪吃蛇游戏

其他资源(new)

某公司的雇员分为以下若干类： Employee：这是所有员工总的父类，属性：员工的姓名和生日月份。 方法：getSalary(int month) 根据参数月份来确定工资，如果该月员工过生日，

判断随机整数是否是素数 产生100个0-999之间的随机整数，然后判断这100个随机整数哪些是素数，哪些不是？

完成九宫格程序

. 定义一个int型的一维数组，包含10个元素，分别赋一些随机整数，然后求出所有元素的最大值

歌德巴赫猜想,任何一个大于六的偶数可以拆分成两个质数的和

在屏幕上打印出n行的金字塔图案，如，若n=5,则图案如下

计算圆周率

利用程序输出如下图形:

求 2/1+3/2+5/3+8/5+13/8.....前20项之和？

Nutch入门教程 pdf下载