1.什么是websocket?

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

2.为什么需要使用websocket?

之前游览器想获取服务器数据,只有不断发起请求,轮询获取。既效率低下,数据时效性也得不到保障。如果服务器能主动向客户端推送消息,这样就完美了。在这种想法下,websocket诞生了!

3.怎样使用websocket?

3.1.使用maven引入jar依赖

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

3.2.编写配置类

首先创建服务器端点bean

  1. @Bean
  2. public ServerEndpointExporter serverEndpointExporter() {
  3. return new ServerEndpointExporter();
  4. }

再编写具体的端点请求处理类

  1. package com.chenyuwen.demo;
  2. import org.slf4j.Logger;
  3. import org.slf4j.LoggerFactory;
  4. import org.springframework.stereotype.Component;
  5. import javax.websocket.*;
  6. import javax.websocket.server.ServerEndpoint;
  7. @ServerEndpoint("/websocket")
  8. @Component
  9. public class WebSocket {
  10. private static final Logger log = LoggerFactory.getLogger(WebSocket.class);
  11. /**
  12. * 连接建立成功调用的方法
  13. * @param session
  14. */
  15. @OnOpen
  16. public void onOpen(Session session) {
  17. log.info("创建连接");
  18. }
  19. /**
  20. * 连接关闭调用的方法
  21. */
  22. @OnClose
  23. public void onClose() {
  24. log.info("连接关闭");
  25. }
  26. /**
  27. * 收到客户端消息后调用的方法
  28. * @param session
  29. * @param message 客户端发送过来的消息
  30. */
  31. @OnMessage
  32. public void onMessage(Session session, String message) {
  33. log.info("收到消息:{}", message);
  34. }
  35. /**
  36. * 发生错误时调用
  37. *
  38. * @param session
  39. * @param error
  40. */
  41. @OnError
  42. public void onError(Session session, Throwable error) {
  43. log.error("发生错误", error);
  44. }
  45. }

3.3.前端js编写

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>My WebSocket</title>
  5. </head>
  6. <body>
  7. Welcome<br/>
  8. <input id="text" type="text"/>
  9. <button onclick="send()">Send</button>
  10. <button onclick="closeWebSocket()">Close</button>
  11. <div id="message">
  12. </div>
  13. </body>
  14. <script type="text/javascript">
  15. var websocket = null;
  16. //判断当前浏览器是否支持WebSocket
  17. if ('WebSocket' in window) {
  18. //使用http只需ws://,使用https则为wss://
  19. websocket = new WebSocket("wss://localhost/websocket");
  20. } else {
  21. alert('Not support websocket')
  22. }
  23. //连接发生错误的回调方法
  24. websocket.onerror = function () {
  25. setMessageInnerHTML("error");
  26. };
  27. //连接成功建立的回调方法
  28. websocket.onopen = function (event) {
  29. setMessageInnerHTML("open");
  30. }
  31. //接收到消息的回调方法
  32. websocket.onmessage = function (event) {
  33. setMessageInnerHTML(event.data);
  34. }
  35. //连接关闭的回调方法
  36. websocket.onclose = function () {
  37. setMessageInnerHTML("close");
  38. }
  39. //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
  40. window.onbeforeunload = function () {
  41. websocket.close();
  42. }
  43. //将消息显示在网页上
  44. function setMessageInnerHTML(innerHTML) {
  45. document.getElementById('message').innerHTML += innerHTML + '<br/>';
  46. }
  47. //关闭连接
  48. function closeWebSocket() {
  49. websocket.close();
  50. }
  51. //发送消息
  52. function send() {
  53. var message = document.getElementById('text').value;
  54. websocket.send(message);
  55. }
  56. </script>
  57. </html>

3.4.查看效果

当我们进入页面时,控制台会输出:

当我们输入“hello world!”并点击“Send”发送时:

控制台会输出:

当点击“Close”关闭连接时:

以上即实现了websocket在springboot中的简单使用。

SpringBoot-2.1.1系列二:使用websocket的更多相关文章

  1. 源码学习系列之SpringBoot自动配置(篇二)

    源码学习系列之SpringBoot自动配置(篇二)之HttpEncodingAutoConfiguration 源码分析 继上一篇博客源码学习系列之SpringBoot自动配置(篇一)之后,本博客继续 ...

  2. SpringBoot启动流程分析(二):SpringApplication的run方法

    SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...

  3. swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?

    date: 2018-8-01 14:22:17title: swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?description: 阅读 sowft 框架源码, 了解 sowf ...

  4. Spring Boot进阶系列二

    上一篇文章,主要分析了怎么建立一个Restful web service,系列二主要创建一个H5静态页面使用ajax请求数据,功能主要有添加一本书,请求所有书并且按照Id降序排列,以及查看,删除一本书 ...

  5. 前端构建大法 Gulp 系列 (二):为什么选择gulp

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  6. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  7. Web 开发人员和设计师必读文章推荐【系列二十九】

    <Web 前端开发精华文章推荐>2014年第8期(总第29期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  8. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  10. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

随机推荐

  1. Timer更新UI的合理办法

    using System; using System.Windows; using System.Timers; using System.Windows.Threading; namespace T ...

  2. SuperSocket获取会话的连接和断开事件

    关键字: 连接事件, 断开事件, OnSessionStarted,OnSessionClosed, NewSessionConnected, SessionClosed AppSession 的虚方 ...

  3. 【t074】上学路线

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 你所在城市的街道好像一个棋盘,有a条南北方向的街道,和b条东西方向的街道. 南北方向的a条街道从西到东 ...

  4. vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

    <template>   <div class="card-index pt-relative">     <div id="wrapper ...

  5. oracle中 =: 和 := 分别是什么意思

    oracle中 =: 和 := 分别是什么意思 =:应该相当于 a = :b 表明b是个绑定变量,需要执行时进行变量绑定:= 相当于一般编程语言中的 赋值 a := 1 即将 数字1赋值给变量 a

  6. Python--day27--复习

    例1:

  7. Python--day46--MySQL视图

    1,创建一个视图(给临时表起一个别名v1),视图也虚拟出来的,并非真正的物理表,不能直接往里面插数据.它的数据是动态的读出来的. create view v1 as select * from use ...

  8. UVA 247"Calling Circles"(floyd求传递闭包+SCC)

    传送门 题意: 如果两个人相互打电话(直接或间接),则说他们在同一个电话圈里. (a,b) 表示 a 打给 b: 例如,(a,b),(b,c),(c,d),(d,a),则这四个人在同一个电话圈里: 输 ...

  9. 获取 Nuget 版本号

    本文告诉大家通过命令行获取 Nuget 的版本号 在 Nuget 中没有 -version 和 -v 和 --version 等写法,只需要直接输入 nuget 在第一行就会显示版本号 nuget N ...

  10. java编程规范大全

    JAVA编程规范大全 命名规范 定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失.(这些规范并不是一定要绝对遵守,但是一定要让程序有良好的可读性 ...