一、概述

1.Http

  1. #http简介
  2. HTTP是一个应用层协议，无状态的,端口号为80。主要的版本有1.0/1.1/2.0.
  4. #http1.0/1.1/2.0
  5. 1.HTTP/1.* 一次请求-响应，建立一个连接，用完关闭；
  6. 2.HTTP/1.1 串行化单线程处理，可以同时在同一个tcp链接上发送多个请求，但是只有响应是有顺序的，只有上一个请求完成后，下一个才能响应。一旦有任务处理超时等，后续任务只能被阻塞(线头阻塞)；
  7. 3.HTTP/2 并行执行。某任务耗时严重，不会影响到任务正常执行

2.WebSocket

  1. #WebSocket简介
  2. Websocket是html5提出的一个协议规范，是为解决客户端与服务端实时通信。本质上是一个基于tcp，先通过HTTP/HTTPS协议发起一条特殊的http请求进行握手后创建一个用于交换数据的TCP连接.WebSocket同HTTP一样也是应用层的协议，但是它是一种双向通信协议。
  4. #WebSocket连接过程
  5. 1. 浏览器、服务器建立TCP连接，三次握手。这是通信的基础，传输控制层，若失败后续都不执行。
  6. 2. TCP连接成功后，浏览器通过HTTP协议向服务器传送WebSocket支持的版本号等信息。（开始前的HTTP握手）
  7. 3. 服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据。
  8. 4. 当收到了连接成功的消息后，通过TCP通道进行传输通信。
  10. #WebSocket优势
  11. 浏览器和服务器只需要要做一个握手的动作，然后单独建立一条TCP的通信通道进行数据的传送, 在
  12. 建立连接之后，双方可以在任意时刻，相互推送信息。同时，服务器与客户端之间交换的头信息很小。

3.Socket

  1. #socket简介
  2. Socket并不是一个协议，而是为了方便使用TCP或UDP而抽象出来的一层，是位于应用层和传输控制层之间的一组接口。
  4. Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。
  6. #socket作用
  7. 当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。

4.WebSocket 和 Http

  1. #相同点
  2. 1. 都是一样基于TCP的，都是可靠性传输协议。
  3. 2. 都是应用层协议。
  5. #不同点
  6. 1. WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息。HTTP是单向的。
  7. 2. WebSocket是需要握手进行建立连接的
  9. #联系
  10. WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。

5.WebSocket 和 Socket

  1. #区别
  2. Socket是传输控制层协议，WebSocket是应用层协议。

6.长连接，短连接

  1. #短连接
  2. 连接->传输数据->关闭连接
  3. HTTP是无状态的，浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。
  4. 也可以这样说：短连接是指SOCKET连接后发送后接收完数据后马上断开连接。
  1. #长连接
  2. 连接->传输数据->保持连接 -> 传输数据-> ... ->关闭连接。
  3. 长连接指建立SOCKET连接后不管是否使用都保持连接，但安全性较差。

7.http和websocket的长连接区别

  1. HTTP1.1通过使用Connection:keep-alive进行长连接，HTTP 1.1默认进行持久连接。在一次 TCP 连接中可以完成多个 HTTP 请求，但是对每个请求仍然要单独发 header，Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。这种长连接是一种“伪链接”
  3. websocket的长连接，是一个真的全双工。长连接第一次tcp链路建立之后，后续数据可以双方都进行发送，不需要发送请求头。
  5. keep-alive双方并没有建立正真的连接会话，服务端可以在任何一次请求完成后关闭。WebSocket 它本身就规定了是正真的、双工的长连接，两边都必须要维持住连接的状态

传统 HTTP 请求响应客户端服务器交互图

WebSocket 模式客户端与服务器的交互图

二、WebSocket请求报文和Http的差别

1.响应头

  1. HTTP/1.1 101
  2. Upgrade: websocket
  3. Connection: upgrade #协议升级成功
  4. Sec-WebSocket-Accept: IiuAbVCofO973oDeSggnpHFjLeU= #服务端处理之后的key
  5. Sec-WebSocket-Extensions: permessage-deflate #扩展协议
  6. Date: Fri, 02 Aug 2019 03:29:14 GMT

2.请求头

  1. Host: xiajibagao.top:8080 #升级协议的服务主机地址端口
  2. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0
  3. Accept: */*
  4. Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
  5. Accept-Encoding: gzip, deflate
  6. Sec-WebSocket-Version: 13 #当前WebSocket协议版本号
  7. Origin: http://xiajibagao.top:8080
  8. Sec-WebSocket-Extensions: permessage-deflate
  9. Sec-WebSocket-Key: wJfIzjPgehJrCXmKSvL8cQ== #连接凭证，客户端将这个key发送给服务器，服务器将这个key进行处理，将处理后的key返回给客户端，客户端根据这个key是否正确来判断是否建立连接。
  10. Connection: keep-alive, Upgrade
  11. Cookie: UM_distinctid=16c31bfc8219-0079038beea7fb-4c312c7c-144000-16c31bfc8226a3; CNZZDATA1277674304=827412020-1564198032-%7C1564319195
  12. Pragma: no-cache
  13. Cache-Control: no-cache
  14. Upgrade: websocket #通知服务器协议升级为WebSocket

三、基于springboot的简单聊天室

1.新建index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>这是一个聊天室</title>
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">
  8.         <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  9.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  10.         <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  11.         <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  13.         <style>
  14.             #showarea{
  15.                 border:1px solid darkgrey;
  16.                 border-radius:10px;
  17.                 min-height: 350px;
  18.                 padding: 10px;
  19.             }
  20.         </style>
  22.     </head>
  23.     <body>
  25.         <div class="container">
  26.             <div class="row">
  27.                 <br />
  28.                 <div class="col-sm-4">
  29.                     <div class="form-group">
  30.                         <!--用户名-->
  31.                         <input type="text" class="form-control" value="匿名" id="username">
  32.                         <br />
  33.                         <!--聊天内容-->
  34.                         <textarea value="输入聊天内容" rows="10" class="form-control" id="sendarea"></textarea>
  35.                         <br />
  36.                         <!--提交按钮-->
  37.                         <button class="btn btn-block btn-success" onclick="submitmsg()">发送</button>
  38.                     </div>
  39.                 </div>
  41.                 <div class="col-sm-8">
  42.                     <!--消息列表展示区-->
  43.                     <div id="showarea">
  45.                     </div>
  47.                 </div>
  49.             </div>
  50.         </div>
  52.     </body>
  53. </html>

2.页面的js

  1. <script>
  2.     //当打开页面时新建WebSocket连接
  3.     var host = window.location.host;
  4.     var url = "ws://"+host+"/webchat/chat";//访问到后台项目注解所在的类
  5.     var ws = new WebSocket(url); //new一个新ws对象，new完即新建立一条“管道”
  7. 	/**
  8.     *ws.onopen方法，当连接建立成功后触发
  9.     */
  10.     ws.onopen=function(){
  11.         onsole.log("连接成功！");
  12.     };
  14.     /**
  15.     *发送消息给服务器
  16.     */
  17.     function submitmsg() {
  18.             //获取用户名和要发送的消息
  19.             var username = document.getElementById("username").value;
  20.             var sendarea = document.getElementById("sendarea").value;
  21.             //转换为json字符串
  22.             var jsonmsg ={
  23.                 username:username,
  24.                 sendarea:sendarea,
  25.                 time:new Date()
  26.             }
  27.             //发送消息
  28.             ws.send(JSON.stringify(jsonmsg));
  29.         }
  31.     /**
  32.     *从服务器接收消息
  33.     *ws.onmessage方法，当后台接受发送信息时触发
  34.     */
  35. 	ws.onmessage = function(evn){
  36.         //转换为json字符串
  37.         var jsonobj = eval(JSON.parse(evn.data));
  38. 	    //往页面插入消息
  39.         var msg = document.createElement("h4");
  40.         context = jsonobj.username+'&nbsp;&nbsp;'+getDate(jsonobj.time)+'<br />'+jsonobj.sendarea
  41.         msg.innerHTML=context;
  42.         var showareadiv = document.getElementById("showarea");
  43.         showareadiv.appendChild(msg);
  44.     };
  46.     /**
  47.     *ws.onclose方法，当窗口关闭，会话结束时触发
  48.     */
  49.     ws.onclose = function(){
  50.         onsole.log("关闭连接");
  51.     };
  53.     /*日期转换*/
  54.     function getDate(time){
  55.         var date = new Date(time);
  56.         Year = date.getFullYear();
  57.         Month = date.getMonth();
  58.         Day = date.getDay();
  59.         time = Year+"-"+getZero(Month)+"-"+getZero(Month);
  60.         return time;
  61.     }
  62.     /*日期补零*/
  63.     function getZero(num){
  65.         if(parseInt(num) < 10 ){
  66.         num = "0" + num;
  67.         }
  69.         return num;
  70.     }
  72. </script>
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <!-- 点击按钮，提交文本框内内容 -->
  9.     <button onclick="send()">open</button>
  10.     <input type="text" value="输入点什么" id="textarea">
  12.     <script type="text/javascript">
  14.         var host = window.location.host; //获取地址
  15.         var url = "ws://"+host+"/websocket/echo";//访问到后台项目注解所在的类
  16.         var ws = new WebSocket(url);//new一个新ws对象，new完即新建立一条“管道”
  18.         //当连接建立成功后触发
  19.         ws.onopen=function(){
  20.             onsole.log("连接成功！");
  21.         };
  22.         //当窗口关闭，会话结束时触发
  23.         ws.onclose = function(){
  24.             onsole.log("关闭连接");
  25.         };
  26.         //当后台接受发送信息时触发
  27.         ws.onmessage = function(evn){
  28.             alert(evn.data);
  29.         };
  31. 		//当点击按钮时提交信息
  32.         function send() {
  33.             var msg = document.getElementById("textarea").value;
  34.             ws.send(msg);
  35.         }
  37.     </script>
  39. </body>
  40. </html>

3.添加依赖

  1. <dependencies>
  2.     <!--使用自带的tomcat-->
  3.     <dependency>
  4.         <groupId>org.springframework.boot</groupId>
  5.         <artifactId>spring-boot-starter-tomcat</artifactId>
  6.         <scope>provided</scope>
  7.     </dependency>
  9.     <dependency>
  10.         <groupId>org.springframework.boot</groupId>
  11.         <artifactId>spring-boot-starter-web</artifactId>
  12.     </dependency>
  13.     <dependency>
  14.         <groupId>org.springframework.boot</groupId>
  15.         <artifactId>spring-boot-starter-websocket</artifactId>
  16.     </dependency>
  18.     <dependency>
  19.         <groupId>org.springframework.boot</groupId>
  20.         <artifactId>spring-boot-starter-test</artifactId>
  21.         <scope>test</scope>
  22.     </dependency>
  23.     <dependency>
  24.         <groupId>com.alibaba</groupId>
  25.         <artifactId>fastjson</artifactId>
  26.         <version>1.2.58</version>
  27.     </dependency>
  28. </dependencies>

4.Controller

  1. package com.huang.socketserver;
  3. import com.alibaba.fastjson.JSON;
  4. import com.alibaba.fastjson.JSONObject;
  5. import org.springframework.web.bind.annotation.RestController;
  7. import javax.websocket.OnClose;
  8. import javax.websocket.OnMessage;
  9. import javax.websocket.OnOpen;
  10. import javax.websocket.Session;
  11. import javax.websocket.server.ServerEndpoint;
  12. import java.io.IOException;
  13. import java.util.HashSet;
  14. import java.util.Set;
  16. /**
  17.  * Author：huang
  18.  * Date：2019-08-02 22:35
  19.  * Description：<描述>
  20.  */
  21. //
  22. @ServerEndpoint("/chat")
  23. @RestController
  24. public class ChatSocket {
  26.     //定义一个全局变量集合sockets,用户存放每个登录用户的通信管道
  27.     private static Set<ChatSocket> sockets = new HashSet<ChatSocket>();
  28.     //定义一个全局变量Session,用于存放登录用户
  29.     private Session session;
  31.     /**
  32.     *@OnOpen注解
  33.     *注解下的方法会在连接建立时运行
  34.     */
  35.     @OnOpen
  36.     public void open(Session session){
  37.         System.out.println("建立了一个socket通道" + session.getId());
  38.         this.session = session;
  39.         //将当前连接上的用户session信息全部存到scokets中
  40.         sockets.add(this);
  41.     }
  43.     /**
  44.     *@OnMessage注解
  45.     *注解下的方法会在前台传来消息时触发
  46.     */
  47.     @OnMessage
  48.     public void getmes(Session session,String jsonmsg){
  50.         broadcast(sockets,jsonmsg);
  52.     }
  54.     /**
  55.     *@OnClose注解
  56.     *注解下的方法会在连接关闭时运行
  57.     */
  58.     @OnClose
  59.     public void close(Session session){
  60.         //移除退出登录用户的通信管道
  61.         sockets.remove(this);
  62.         System.out.println(session.getId()+"退出了会话！");
  64.     }
  66.     /**
  67.     *广播消息
  68.     */
  69.     public void broadcast(Set<ChatSocket> sockets , String msg){
  70.         //遍历当前所有的连接管道，将通知信息发送给每一个管道
  71.         for(ChatSocket socket : sockets){
  72.             try {
  73.                 //通过session发送信息
  74.                 System.out.println("发送给管道"+socket.session.getId());
  75.                 socket.session.getBasicRemote().sendText(msg);
  76.             } catch (IOException e) {
  77.                 e.printStackTrace();
  78.             }
  79.         }
  80.     }
  82. }
  1. package com.huang.websocket;
  3. import javax.websocket.OnClose;
  4. import javax.websocket.OnMessage;
  5. import javax.websocket.OnOpen;
  6. import javax.websocket.Session;
  7. import javax.websocket.server.ServerEndpoint;
  8. import java.io.IOException;
  10. @ServerEndpoint(value = "/echo")
  11. public class echoSocket {
  13.     public echoSocket() {
  14.         System.out.println("新对象！");
  15.     }
  17.     /**
  18.     *@OnOpen注解
  19.     *注解下的方法会在连接建立时运行
  20.     */
  21.     @OnOpen
  22.     public void open(Session session){
  23.         //一个session代表一个通信会话
  24.         //通过sessionid区分每一个会话
  25.         System.out.println("连接成功");
  26.         System.out.println(session.getId());
  27.     }
  29.     /**
  30.     *@OnClose注解
  31.     *注解下的方法会在连接关闭时运行
  32.     */
  33.     @OnClose
  34.     public void close(Session session){
  35.         System.out.println("关闭"+session.getId());
  36.     }
  38.     /**
  39.     *@OnMessage注解
  40.     *注解下的方法会在前台传来消息是触发
  41.     */
  42.     @OnMessage
  43.     public void getmes(Session session,String msg){
  44.         System.out.println("客户端："+msg);
  46.         try {
  47.             //向请求服务器的会话发送消息
  48.             session.getBasicRemote().sendText("服务器：你发来的消息是-"+msg);
  49.         } catch (IOException e) {
  50.             e.printStackTrace();
  51.         }
  52.     }
  54. }

五、运行效果

搞定！

=====================================

参考：https://www.cnblogs.com/ricklz/p/11108320.html

参考：https://www.cnblogs.com/Javi/p/9303020.html

=====================================

基于springboot的websocket聊天室的更多相关文章

  1. SpringBoot 搭建简单聊天室

    SpringBoot 搭建简单聊天室(queue 点对点) 1.引用 SpringBoot 搭建 WebSocket 链接 https://www.cnblogs.com/yi1036943655/p ...

  2. 使用.NET Core和Vue搭建WebSocket聊天室

    博客地址是:https://qinyuanpei.github.io.  WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...

  3. 基于flask的网页聊天室（四）

    基于flask的网页聊天室(四) 前言 接前天的内容,今天完成了消息的处理 具体内容 上次使用了flask_login做用户登录,但是直接访问login_requare装饰的函数会报401错误,这里可 ...

  4. 用Java构建一个简单的WebSocket聊天室

    前言 首先对于一个简单的聊天室,大家应该都有一定的概念了,这里我们省略用户模块的讲解,而是单纯的先说说聊天室的几个功能:自我对话.好友交流.群聊.离线消息等. 今天我们要做的demo就能帮我们做到这一 ...

  5. websocket聊天室

    目录 websocket方法总结 群聊功能 基于websocket聊天室(版本一) websocket方法总结 # 后端 3个 class ChatConsumer(WebsocketConsumer ...

  6. WebSocket聊天室demo

    根据Socket异步聊天室修改成WebSocket聊天室 WebSocket特别的地方是 握手和消息内容的编码.解码(添加了ServerHelper协助处理) ServerHelper: using ...

  7. Netty入门（一）之webSocket聊天室

    一:简介 Netty 是一个提供 asynchronous event-driven (异步事件驱动)的网络应用框架,是一个用以快速开发高性能.高可靠性协议的服务器和客户端. 换句话说,Netty 是 ...

  8. 基于flask的网页聊天室（三）

    基于flask的网页聊天室(三) 前言 继续上一次的内容,今天完成了csrf防御的添加,用户头像的存储以及用户的登录状态 具体内容 首先是添加csrf的防御,为整个app添加防御: from flas ...

  9. 基于flask的网页聊天室（二）

    基于flask的网页聊天室(二) 前言 接上一次的内容继续完善,今天完成的内容不是很多,只是简单的用户注册登录,内容具体如下 具体内容 这次要加入与数据哭交互的操作,所以首先要建立相关表结构,这里使用 ...

随机推荐

  1. WebGL中深度碰撞方法总结

    z-fighting问题是三维渲染中常见的问题,本文根据实际工作中遇到的一些场景,进行了系统的总结 一个实际工作中的问题 当两个面离得太近就会发生深度碰撞问题,比如: 遇到深度检测问题,最重要的是先搞 ...

  2. ASP.NET Core MVC 之布局（Layout）

    1.什么是布局 布局通常包含常见的用户界面元素,例如应用头,导航或菜单元素和页脚,如图: 常见的HTML结构(例如脚本和样式表)也经常被应用程序中许多页面使用.所有这些共享元素都可以在布局中定义,然后 ...

  3. C＃中谁最快：结构还是类？

    前言 在内存当道的日子里,无论什么时候都要考虑这些代码是否会影响程序性能呢? 在现在的世界里,几乎不会去考虑用了几百毫秒,可是在特别的场景了,往往这几百毫米确影响了整个项目的快慢. 通过了解这两者之间 ...

  4. Kotlin学习快速入门（4）——集合使用

    List,Set,Map都是集合 List 是一个有序集合,可通过索引(反映元素位置的整数)访问元素.元素可以在 list 中出现多次.列表的一个示例是一句话:有一组字.这些字的顺序很重要并且字可以重 ...

  5. Appium+python自动化（二十五）- 那些让人抓耳挠腮、揪头发和掉头发的事 - 获取控件ID（超详解）

    简介 在前边的第二十二篇文章里,已经分享了通过获取控件的坐标点来获取点击事件的所需要的点击位置,那么还有没有其他方法来获取控件点击事件所需要的点击位置呢?答案是:Yes!因为在不同的大小屏幕的手机上获 ...

  6. Mobile game forensics

    My friend Carrie'd like to know "Garena 传说对决" violates any mobile risks such as insecure d ...

  7. 解释一下一门语言该有的东东（Javascript）

    注释 Js中有两种注释 // 单行注释 /**/ 多行注释 变量 变量就像学校学习的 未知数 如 3 + x = 8 x: 类似变量,在改造一下 x + y = z 当 x=3, y=5, z=8, ...

  8. 神奇的 SQL 之子查询，细节满满 ！

    前言 开心一刻 有一天,麻雀遇见一只乌鸦. 麻雀问:你是啥子鸟哟 ? 乌鸦说:我是凤凰. 麻雀说:哪有你龟儿子这么黢黑的凤凰 ? 乌鸦说:你懂个铲铲,老子是烧锅炉的凤凰. 子查询 讲子查询之前,我们先 ...

  9. DataPipeline丨DataOps理念与设计原则

    作者:DataPipeline CEO 陈诚 上周我们探讨了数据的「资产负债表」与「现状」,期间抛给大家一个问题:如果我们制作一个企业的“数据资产负债表”,到底会有多少数据是企业真正的资产? 数据出现 ...

  10. alluxio源码解析-rpc调用概述(1)

    alluxio中几种角色以及角色之间的rpc调用: 作为分布式架构的文件缓存系统,rpc调用必不可少 client作为客户端 master提供thrift rpc的服务,管理以下信息: block信息 ...