案例代码:https://gitee.com/flymini/example-codes/tree/master/WebSocket_/com-learn-websocket04
****
实现客户端向后端发送数据,然后后端将数据推送到前端。
<br/>
步骤如下:
**1. 创建一个 SpringBoot 项目**
```xml
<!-- 引入 websocket 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
**2. 编写扫描注解`@ServerEndpoint`的配置类**
```java
@Configuration
public class WebSocketConfig {
/**
* 扫描标注了注解 @ServerEndpoint 的类,让被标注的类成为 WebSocket 的服务类
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
```
**3. 编写 WebSocket 服务类**
```java
/**
* value:当前 WebSocket 服务的访问地址
*/
@Component
@ServerEndpoint(value = "/v1/endpoint")
public class EndPointController {
/**
* 连接建立时被调用。
*/
@OnOpen
public void onOpen(Session session, EndpointConfig config) {
System.out.println("连接已经建立.");
}
/**
* 收到消息时被调用。
* @param message 前端传递过来的消息。
* @param session
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
System.out.println("收到了消息:" + message);
//将消息推送到前端
session.getBasicRemote().sendText("谢谢,我收到了你的消息:" + message);
}
/**
* 连接关闭时被调用.
*
* @param session
* @param reason 关闭的理由
*/
@OnClose
public void onClose(Session session, CloseReason reason) {
System.out.println("连接已关闭,关闭理由:" + reason);
}
/**
* 当连接发生异常时被调用
*
* @param session
* @param e
*/
@OnError
public void onError(Session session, Throwable e) {
System.out.println("连接发生异常:" + e.getMessage());
e.printStackTrace();
}
}
```
**4. 前端程序**
```js
var sock = null
/**
* 建立连接
*/
function connect() {
sock = new WebSocket('ws://localhost:8090/v1/endpoint')
//当接收到服务端推送过来的消息时被触发
sock.onmessage = (e) => {
console.log(e.data)
}
}
/**
* 发送数据到服务端
*/
function send() {
sock.send('Hello World!')
}
/**
* 关闭当前用户与WebSocket的连接
*/
function close() {
sock.close(3000, "我想关闭连接!")
}
```
- 跨域问题
- 跨域是什么
- 跨域解决方案
- 从后端解决
- nginx反向代理
- WebSocket
- websocket是什么
- websocket协议
- 使用场景
- 实现方式
- 注解与html5原生方式
- websocketAPI
- 实现步骤
- 文件上传
- 文件下载
- 广播通信
- 定时推送
- 编程与socketjs方式
- socketjs与stompjs框架
- 实现步骤
- 重载目的地
- SimpMessagingTemplate
- 定时向前端推送数据
- 5种监听事件
- 点对点通信
- 拦截器
- HandshakeInterceptor
- ChannelInterceptor
- poi之excel表格
- 表格版本
- POI常用类
- POI依赖
- 写表格
- 编写表格过程
- 单元格边框样式
- 单元格背景色
- 冻结行或列
- 单元格合并
- 单元格内换行
- 文档内跳转
- 读表格
- Web中的Excel操作
- 导出表格
- 读取表格
- poi之word文档
- word版本
- 写word
- 基本使用
- 标题样式
- 添加图片
- EasyExcel表格
- EasyExcel是什么
- 与其他Excel工具对比
- EasyExcel依赖
- 读Excel
- 简单读取
- 指定列位置
- 读取多个sheet
- 格式转换
- 多行表头
- 同步读
- 写Excel
- 简单写入
- 单元格样式
- 拦截器
- 列宽
- 冻结行或列
- 合并单元格
- 填充Excel
- SpringSecurity
- SpringSecurity是什么
- 同类型产品对比
- 环境搭建
- 相关概念
- 密码加密
- Web权限控制
- UserDetailsService接口
- 登录认证
- 自定义登录页
- 未授权跳转登录页
- 权限控制
- 自定义403页面
- 权限注解
- 记住我功能
- 注销功能
- CSRF
- CSRF是什么
- CSRF保护演示
- 前后端分离权限控制
- 环境搭建
- 认证实现
- 会话管理
- 动态权限管理
- 微服务权限控制
- 权限控制方案
- SpringBoot整合RabbitMQ
- 整合步骤
- Fanout交换机演示
- Direct交换机演示
- Topic交换机演示
- @RabbitListener方法
- JWT认证与授权
- 环境搭建
- 密码加密
- 认证与授权