SpringBoot-2.1.1系列二：使用websocket
1.什么是websocket？
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
2.为什么需要使用websocket？
之前游览器想获取服务器数据，只有不断发起请求，轮询获取。既效率低下，数据时效性也得不到保障。如果服务器能主动向客户端推送消息，这样就完美了。在这种想法下，websocket诞生了！
3.怎样使用websocket？
3.1.使用maven引入jar依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>3.2.编写配置类
首先创建服务器端点bean
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}再编写具体的端点请求处理类
package com.chenyuwen.demo;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
@Component
public class WebSocket {
private static final Logger log = LoggerFactory.getLogger(WebSocket.class);
/**
* 连接建立成功调用的方法
* @param session
*/
@OnOpen
public void onOpen(Session session) {
log.info("创建连接");
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
log.info("连接关闭");
}
/**
* 收到客户端消息后调用的方法
* @param session
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(Session session, String message) {
log.info("收到消息：{}", message);
}
/**
* 发生错误时调用
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误", error);
}
}3.3.前端js编写
<!DOCTYPE HTML>
<html>
<head>
<title>My WebSocket</title>
</head>
<body>
Welcome<br/>
<input id="text" type="text"/>
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//使用http只需ws://,使用https则为wss://
websocket = new WebSocket("wss://localhost/websocket");
} else {
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
setMessageInnerHTML("open");
}
//接收到消息的回调方法
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 closeWebSocket() {
websocket.close();
}
//发送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>3.4.查看效果
当我们进入页面时，控制台会输出：
当我们输入“hello world！”并点击“Send”发送时：
控制台会输出：
当点击“Close”关闭连接时：
以上即实现了websocket在springboot中的简单使用。
SpringBoot-2.1.1系列二：使用websocket的更多相关文章
- 源码学习系列之SpringBoot自动配置（篇二）
源码学习系列之SpringBoot自动配置(篇二)之HttpEncodingAutoConfiguration 源码分析 继上一篇博客源码学习系列之SpringBoot自动配置(篇一)之后,本博客继续 ...
- SpringBoot启动流程分析（二）：SpringApplication的run方法
SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...
- swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?
date: 2018-8-01 14:22:17title: swoft| 源码解读系列二: 启动阶段, swoft 都干了些啥?description: 阅读 sowft 框架源码, 了解 sowf ...
- Spring Boot进阶系列二
上一篇文章,主要分析了怎么建立一个Restful web service,系列二主要创建一个H5静态页面使用ajax请求数据,功能主要有添加一本书,请求所有书并且按照Id降序排列,以及查看,删除一本书 ...
- 前端构建大法 Gulp 系列 (二)：为什么选择gulp
系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...
- WPF入门教程系列二十三——DataGrid示例(三)
DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...
- Web 开发人员和设计师必读文章推荐【系列二十九】
<Web 前端开发精华文章推荐>2014年第8期(总第29期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发人员和设计师必读文章推荐【系列二十八】
<Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发人员和设计师必读精华文章【系列二十六】
<Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
随机推荐
- css 文字超出部分隐藏
未做隐藏处理 执行结果: 1.1行超出部分省略号 效果: 2.多行超出部分隐藏(目前只能在chrome浏览器中使用,其他浏览器不兼容) 效果: -webkit-line-clamp 属性定义显示行数可 ...
- LightOJ 1123 Trail Maintenance
题意:n个城市m天.每一天修一条道路,输出当前天数的最小生成树,但是这里有一个条件,就是说最小生成树必须包括全部n个城市,否则输出-1 思路:边数有6000如果每一天跑一次最小生成树的话就接近O(m^ ...
- Element-ui学习笔记3--Form表单（二）
Input输入框 Input 为受控组件,它总会显示 Vue 绑定值. 通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model).否则,输入框内显示的值将不会改变. 不支持 ...
- 2005年NOIP普及组复赛题解
题目涉及算法: 陶陶摘苹果:入门题: 校门外的树:简单模拟: 采药:01背包: 循环:模拟.高精度. 陶陶摘苹果 题目链接:https://www.luogu.org/problem/P1046 循环 ...
- 2018-8-10-win10-uwp-获得元素绝对坐标
title author date CreateTime categories win10 uwp 获得元素绝对坐标 lindexi 2018-08-10 19:16:51 +0800 2018-2- ...
- mybatis 基础理解resultType和resultMap
resultType和resultMap: 1.resultType: 一.返回一般数据类型比如要根据 id 属性获得数据库中的某个字段值. mapper (dao)接口: // 根据 id 获得数据 ...
- Native memory allocation (mmap) failed to map 142606336 bytes for committing reserved memory.
这里写链接内容 问题描述 Java程序运行过程中抛出java.lang.OutOfMemoryError: unable to create new native thread,如下所示: [java ...
- java 类加载器的委托机制
l 当Java虚拟机要加载一个类时,到底派出哪个类加载器去加载呢? 1．首先当前线程的类加载器去加载线程中的第一个类. 2．如果类A中引用了类B,Java虚拟机将使用加载类A的类装载器来加载类B. 3 ...
- 基于AutoIt3的运维工具
#Region ;**** 编译指令由 AutoIt3Wrapper 选项编译窗口创建 **** #AutoIt3Wrapper_Icon=favicon.ico #AutoIt3Wrapper_Co ...
- Linux 基础（一）stat函数
Header file: #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> DEFI ...