WebSocket是HTML5下一种新的协议,它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的
在很多项目中,都要用到websocket,使得前端页面与后端页进行实时通信,例如,实时查询订单状态、设备状态实时显示到页面。本博文,分为前端页面代码和后端页面代码,在最后有源代码下载链接。前端使用用vue技术,后端使用springboot
一、后端代码
1、websocket代码
@Slf4j
@Component
@ServerEndpoint(value = "/websocket/order")
public class WebsocketProvider {
/**
* 连接事件,加入注解
* @param session
*/
@OnOpen
public void onOpen(Session session) {
String orderId = WebsocketUtil.getParam(WebsocketUtil.sessionKey, session);
log.info("Websocket连接已打开,当前orderId为:"+orderId);
// 添加到session的映射关系中
WebsocketUtil.addSession(orderId, session);
//测试发送消息
WebsocketUtil.sendMessage(orderId, AjaxResult.success("恭喜,已建立连接"));
}
/**
* 连接事件,加入注解
* 用户断开链接
* @param session
*/
@OnClose
public void onClose(Session session) {
String orderId = WebsocketUtil.getParam(WebsocketUtil.sessionKey, session);
// 删除映射关系
WebsocketUtil.removeSession(orderId);
}
/**
* 当接收到用户上传的消息
* @param session
*/
@OnMessage
public void onMessage(Session session, String message) {
log.info("收到Websocket消息:"+message);
}
/**
* 处理用户活连接异常
* @param session
* @param throwable
*/
@OnError
public void onError(Session session, Throwable throwable) {
try {
if (session.isOpen()) {
session.close();
}
} catch (IOException e) {
e.printStackTrace();
}
throwable.printStackTrace();
}
}
2、controller发送代码
@Slf4j
@RestController
@RequestMapping("/send")
@Api(tags = "SendController", description = "发送管理")
public class SendController {
/**
* 相关信息
*
*/
@GetMapping
public String getPayType(String data) {
WebsocketUtil.sendMessage("123456", AjaxResult.success(data));
return "发送成功";
}
}
3、后端向前端发送消息代码
/**
* 根据用户ID发送消息
*
* @param result
*/
public static void sendMessage(String sessionId, AjaxResult result) {
sendMessage(sessionId, JSON.toJSONString(result));
}
/**
* 根据用户ID发送消息
*
* @param message
*/
public static void sendMessage(String sessionId, String message) {
Session session = ONLINE_SESSION.get(sessionId);
//判断是否存在该用户的session,判断是否还在线
if (session == null || !session.isOpen()) {
return;
}
sendMessage(session, message);
}
二、VUE前端代码
1、界面代码
<div style="display: flex;">
<el-input v-model="sendData" placeholder="请输入要发送的内容"/>
<el-button type="success" @click="send" style="margin-left: 20px;">发送</el-button>
</div>
<div style="margin-top: 25px;margin-bottom: 5px;font-weight: bold;">收到的消息:</div>
<div v-for="(item,index) in messages">
<span>{{item}}</span>
</div>
2、websocket相关代码
console.log('进入状态监听*******')
var url = payServerUrl+"?orderId="+orderId;
//建立webSocket连接
proxy.websocket = new WebSocket(url);
//打开webSokcet连接时,回调该函数
proxy.websocket.onopen = () =>{
console.log("连接建立");
}
//关闭webSocket连接时,回调该函数
proxy.websocket.onclose = () =>{
console.log("连接关闭");
}
//接收信息
proxy.websocket.onmessage = function (res) {
var obj = eval('(' + res.data + ')');
console.log(obj)
proxy.messages.push(res.data)
}
三、测试
1、后端服务启动,运行ServerApplication (运行前,maven先下载依赖包)
2、前端服务启动
window,运行cmd命令,进行前端页面文件夹,执行如下命令
(1)1、安装依赖包
npm install
(2)、启动服务
npm run dev
打开页面 :http://localhost:6080/#/index
3、前端页向后端发送数据
4、后端向前端页面发送数据
使用apifox来发发送请求,apifox百度下载即可
GET请求,http://localhost:8080/ck/send,数据为data
四、源代码:
链接:https://pan.baidu.com/s/1YnuBFQBt2O4GIdcs4jO1SA?pwd=8ahq
提取码:8ahq
专注JAVA系统优化、系统结构调整、系统问题排查医治、系统升级、架构设计、SQL语句优化、小程序、APP、企业应用软件开发,请 + hekf888,欢迎关注,时常发布技术分享博文