springboot vue整合websocket
时间:2022-06-02
本文章向大家介绍springboot vue整合websocket,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.引入包
compile 'org.springframework.boot:spring-boot-starter-websocket'
2.新建类MyWebsocket
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint(value = "/websocket")
@Component
public class MyWebsocket {
//静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<MyWebsocket> webSocketSet = new CopyOnWriteArraySet<MyWebsocket>();
//与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session) {
System.out.println("连接成功");
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
try {
sendMessage("success");
System.out.println("发送连接成功");
} catch (IOException e) {
System.out.println("IO异常");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
System.out.println("有一连接关闭");
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException {
System.out.println("来自客户端的消息:" + message);
//群发消息
//sendInfo("ghghhhjkh");
}
/**
* 群发自定义消息
* */
public static void sendInfo(String message) throws IOException {
for (MyWebsocket item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
continue;
}
}
}
/**
* 发生错误时调用
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
error.printStackTrace();
}
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
MyWebsocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
MyWebsocket.onlineCount--;
}
}
3.调用接口MyWebsocket.sendInfo("notice");
4.vue代码
methods:{
websocket () {
let ws = new WebSocket('ws://192.168.1.205:9032/websocket');
ws.onopen = () => {
// Web Socket 已连接上,使用 send() 方法发送数据
//console.log('数据发送中...')
//ws.send('Holle')
//console.log('数据发送完成')
}
ws.onmessage = evt => {
console.log('数据已接收...')
var received_msg = evt.data;
console.log(received_msg);
if("notice" == received_msg)
{
this.initData();
this.play();
}
else{
console.log("不刷新");
}
}
/* ws.onclose = function () {
// 关闭 websocket
console.log('连接已关闭...')
}
// 路由跳转时结束websocket链接
this.$router.afterEach(function () {
ws.close()
})*/
},
}
本博客所有文章如无特别注明均为原创。作者:陌晴 版权所有:《电光石火》 => springboot vue整合websocket 本文地址:http://www.ilkhome.cn/?post=343 欢迎转载!复制或转载请以超链接形式注明,文章为 陌晴 原创,并注明原文地址 springboot vue整合websocket,谢谢。
- 我用 Python 爬取了全国 4500 个热门景点,告诉你国庆哪里去不得?
- Fragment添加、删除、替换
- spring整合hibernate
- Android应用程序中应用图标和名字的设置
- java中的==和equals
- Android手机开机自动启动
- spring Boot 配置文件详解
- Fragment回退栈及弹出方法
- RepeatMasker安装和使用
- 漏洞追踪:如何检查并修复GHOST(幽灵)漏洞
- 锁的实现原理解锁的实现加锁的实现
- 幽灵漏洞(GHOST)影响大量Linux操作系统及其发行版(更新修复方案)
- openfire中mysql的前期设置
- android中最先被执行的activity
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Anaconda使用命令
- 最大连续子数组
- markdown编辑器实现代码高亮
- LeetCode - 198 简单动态规划 打家劫舍
- Jaskson精讲第7篇-JsonTypeInfo注解在类继承关系下的使用
- 《剑指Offer 1.二维数组中的查找》2019-03-25
- Elasticsearch:Dynamic mapping
- 设计模式《单例设计模式》
- 《0-1 背包问题》
- 使用分治思想 求数组中的最大和最小值
- python 入门笔记[语法基础(下)]
- Java 成员变量和属性的区别
- xmuC语言程序实践week 1 大作业
- 《01-背包问题-点菜》
- 模拟赛 2018 Benelux Algorithm Programming Contest (BAPC 18)(部分题)