springboot+vue+websocket实现PC端消息实时推送
前端使用了vue框架，增加的代码比较简单如下：//在方法里调用 this.websocketsend()发送数据给服务器onConfirm () {//需要传输的数据let data = {code: 1,item: '传输数据'}this.websocketsend(J...
·
前端使用了vue框架，增加的代码比较简单如下：
//在方法里调用 this.websocketsend()发送数据给服务器
onConfirm () {
//需要传输的数据
let data = {
code: 1,
item: '传输数据'
}
this.websocketsend(JSON.stringify(data))
},
/*
*/
initWebSocket () { // 初始化weosocket
this.websock = new WebSocket('ws://localhost:9090/websocket/dhj')
this.websock.onmessage = this.websocketonmessage
this.websock.onerror = this.websocketonerror
this.websock.onopen = this.websocketonopen
this.websock.onclose = this.websocketclose
},
websocketonopen () { // 连接建立之后执行send方法发送数据
let data = {
code: 0,
msg: '这是client：初次连接'
}
this.websocketsend(JSON.stringify(data))
},
websocketonerror () {
console.log( 'WebSocket连接失败')
},
websocketonmessage (e) { // 数据接收
console.log('数据接收' + e.data)
alert('你有新消息'+ e.data)
},
websocketsend (Data) { // 数据发送
this.websock.send(Data)
},
websocketclose (e) { // 关闭
console.log('已关闭连接', e)
}
}，
created () {
console.log('created')
this.initWebSocket()
},
data() {
return{
websocket: null
}
}，
destroyed () {
this.websock.close() // 离开路由之后断开websocket连接
},前端就这么多，没什么复杂的，不多说
下面是后台服务：
相关的就是这四个文件，全部将代码分析，不需要你下载花积分，坑也都解决完毕
首先是pom.xml文件的内容，拿走不谢
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.mi.msg</groupId>
<artifactId>mi</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>mi</name>
<description>Msg project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-amqp</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.amqp</groupId>
<artifactId>spring-rabbit-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger2 -->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.9.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.9.2</version>
</dependency>
<!-- 添加JSON依赖-->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<!-- 必须添加JDK版本号-->
<classifier>jdk15</classifier>
</dependency>
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.9.2</version>
</dependency>
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>net.sf.ezmorph</groupId>
<artifactId>ezmorph</artifactId>
<version>1.0.3</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
能用到的依赖都全了，下面是MySpringConfigurator代码
package com.mi.msg.base;
import org.springframework.beans.BeansException;
import org.springframework.beans.factory.BeanFactory;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import javax.websocket.server.ServerEndpointConfig;
public class MySpringConfigurator extends ServerEndpointConfig.Configurator implements ApplicationContextAware {
private static volatile BeanFactory context;
@Override
public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
MySpringConfigurator.context = applicationContext;
}
@Override
public <T> T getEndpointInstance(Class<T> clazz) throws InstantiationException {
return context.getBean(clazz);
}
}
然后是WebSocketConfig代码配合上一个来解决websocket初始化连接报404错误，其他人的解释都没解决，这个可以
package com.mi.msg.base;
import org.springframework.boot.autoconfigure.condition.ConditionalOnWebApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
@ConditionalOnWebApplication
public class WebSocketConfig {
//使用boot内置tomcat时需要注入此bean
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
@Bean
public MySpringConfigurator mySpringConfigurator() {
return new MySpringConfigurator();
}
}
然后是WebSocket核心接受和发送消息的代码
package com.mi.msg.base;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Component
@ServerEndpoint(value = "/websocket/{username}")//, configurator = MySpringConfigurator.class这个地方经验证不需用加上否则多设备连接回发现两台以上设备连接 回造成下面的session变为同一个，造成其他设备推送失败，所以不要盲目复制别人的，要注意此处
public class WebSocket {
private static int onlineCount = 0;
private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>();
private Session session;
private String username;
@OnOpen
public void onOpen(@PathParam("username") String username, Session session) throws IOException {
this.username = username;
this.session = session;
addOnlineCount();
clients.put(username, this);
System.out.println("已连接" + getOnlineCount());
}
@OnClose
public void onClose() throws IOException {
clients.remove(username);
subOnlineCount();
System.out.println("已连接" + getOnlineCount());
}
@OnMessage
public void onMessage(String message) throws IOException {
// DataWrapper res = new DataWrapper();
// System.out.println("message:" + message);
// JSONObject req = JSONObject.parseObject(message);
// 发送数据给服务端
// sendMessageAll(JSON.toJSONString(res));
}
@OnError
public void onError(Session session, Throwable error) {
error.printStackTrace();
}
public void sendMessageTo(String message, String To) throws IOException {
// session.getBasicRemote().sendText(message);
// session.getAsyncRemote().sendText(message);
for (WebSocket item : clients.values()) {
if (item.username.equals(To))
item.session.getAsyncRemote().sendText(message);
}
}
public void sendMessageAll(String message) throws IOException {
for (WebSocket item : clients.values()) {
item.session.getAsyncRemote().sendText(message);
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocket.onlineCount--;
}
public static synchronized Map<String, WebSocket> getClients() {
return clients;
}
}
对点，对群发送消息都可以，下面是后台主动触发，发送消息
@ApiOperation(value="获取用户信息",notes="username是唯一属性，单个用户可直接通过username获取") //标注在方法：用以备注接口描述
@PostMapping(value="/user/query")
public String getUserInfo(@RequestBody String username){
WebSocket ws = new WebSocket();
try {
//ws.sendMessageAll(JSON.toJSONString(username));
ws.sendMessageTo("你有新订单了",username);
} catch (IOException e) {
e.printStackTrace();
}
return username;
}
指定的人就能收到了，花了一天时间才打通，后面会实现图文推送，移动设备推送等都要建立在这个基础上
加油#######
前往低代码交流专区
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)