使用vue+springboot
1.引入jar包
<!--socket-io--> <dependency> <groupId>com.corundumstudio.socketio</groupId> <artifactId>netty-socketio</artifactId> <version>1.7.7</version> </dependency>
2.配置类
import com.corundumstudio.socketio.SocketConfig; import com.corundumstudio.socketio.SocketIOServer; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; /** * @author linzf * @since 2019-06-13 * 类描述:socketIo的配置类 */ @Configuration public class SocketIoConfig { @Value("${socketio.host}") private String host; @Value("${socketio.port}") private Integer port; @Value("${socketio.bossCount}") private int bossCount; @Value("${socketio.workCount}") private int workCount; @Value("${socketio.allowCustomRequests}") private boolean allowCustomRequests; @Value("${socketio.upgradeTimeout}") private int upgradeTimeout; @Value("${socketio.pingTimeout}") private int pingTimeout; @Value("${socketio.pingInterval}") private int pingInterval; /** * 以下配置在上面的application.yml中已经注明 * @return 实例化socketIo的服务对象 */ @Bean public SocketIOServer socketIOServer() { SocketConfig socketConfig = new SocketConfig(); socketConfig.setTcpNoDelay(true); socketConfig.setSoLinger(0); com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration(); config.setSocketConfig(socketConfig); config.setHostname(host); config.setPort(port); config.setBossThreads(bossCount); config.setWorkerThreads(workCount); config.setAllowCustomRequests(allowCustomRequests); config.setUpgradeTimeout(upgradeTimeout); config.setPingTimeout(pingTimeout); config.setPingInterval(pingInterval); return new SocketIOServer(config); } }
3.接口类
public interface SocketIoService { /** * 推送的事件 */ String PUSH_EVENT = "push_event"; /** * 启动服务 * * @throws Exception */ void start() throws Exception; /** * 停止服务 */ void stop(); /** * 推送信息 * * @param pushMessage */ void pushMessageToUser(PushMessage pushMessage); }
4.接口实现类
import com.corundumstudio.socketio.SocketIOClient; import com.corundumstudio.socketio.SocketIOServer; import com.qd.ks.config.PushMessage; import com.qd.ks.config.SocketIoService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import javax.annotation.PostConstruct; import javax.annotation.PreDestroy; import java.util.List; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; /** * @author linzf * @since 2019-06-13 * 类描述:socket的实现类 */ @Service(value = "socketIOService") public class SocketIoServiceImpl implements SocketIoService { /** * 用来存已连接的客户端 */ private static Map<String, SocketIOClient> clientMap = new ConcurrentHashMap<>(); /** * socketIo的对象 */ @Autowired private SocketIOServer socketIOServer; /** * 功能描述:当前的service被初始化的时候执行以下的方法 * @throws Exception */ @PostConstruct private void autoStartUp() throws Exception { start(); } /** * 功能描述:当我们的系统停止的时候关闭我们的socketIo * @throws Exception */ @PreDestroy private void autoStop() throws Exception { stop(); } @Override public void start() throws Exception { // 监听客户端连接 socketIOServer.addConnectListener(client -> { /** * 此处实现我们的socket的连接的用户的逻辑,此处我前端传的是loginUser这个参数,大家可以根据自己的情况来定义入参 */ String loginUser = getParamsByClient(client).get("loginUserId").get(0); clientMap.put(loginUser, client); }); // 监听客户端断开连接 socketIOServer.addDisconnectListener(client -> { String loginUser = getParamsByClient(client).get("loginUserId").get(0); if (loginUser != null && !"".equals(loginUser)) { clientMap.remove(loginUser); client.disconnect(); } }); // 处理自定义的事件,与连接监听类似 socketIOServer.addEventListener(PUSH_EVENT, PushMessage.class, (client, data, ackSender) -> { // TODO do something }); socketIOServer.start(); } @Override public void stop() { if (socketIOServer != null) { socketIOServer.stop(); socketIOServer = null; } } /** * 功能描述:发送消息到前端 * @param pushMessage 发送消息的实体 */ @Override public void pushMessageToUser(PushMessage pushMessage) { String loginUser=String.valueOf(pushMessage.getLoginUserId()); if(clientMap.get(loginUser)!=null){ clientMap.get(loginUser).sendEvent(PUSH_EVENT, pushMessage); } } /** * 此方法为获取client连接中的参数,可根据需求更改 * * @param client * @return */ private Map<String, List<String>> getParamsByClient(SocketIOClient client) { // 从请求的连接中拿出参数 Map<String, List<String>> params = client.getHandshakeData().getUrlParams(); return params; } }
5.消息推送实体
import lombok.Data; import java.util.Map; /** * @author linzf * @since 2019-06-13 * 类描述:socket消息发送实体类 */ @Data public class PushMessage { /** * 当前登陆的用户 */ private Long loginUserId; /** * 推送的标题 */ private String title; /** * 推送的内容 */ private Map<String, Object> content; /** * 空的构造函数 */ public PushMessage() { super(); } /** * 构造函数 * @param loginUserId * @param title * @param content */ public PushMessage(Long loginUserId,String title, Map<String, Object> content) { this.loginUserId = loginUserId; this.title = title; this.content = content; } }
6.接受前端发送的请求
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.config.PushMessage; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController @RequestMapping("interfaces/socket") public class SocketController { @Autowired private SocketIoService socketIoService; @PostMapping("send") public ResultJson sendMsg(@RequestParam("content") String content, @RequestParam("cardno")String cardno, @RequestParam("examId")String examId){ socketIoService.pushMessageToUser(new PushMessage(Long.valueOf(cardno),"",content));//推送给指定的人 cardno,content消息
return ResultJson.ok();
} }
7.vue中的实现
安装socket.io-client
8.
import SocketIO from "socket.io-client"
9.
mounted() { let opts = { query: 'loginUserId='+this.userId } let socket = SocketIO.connect('http://192.168.0.111:9099', opts) socket.on('connect', function () { console.log('连接成功') }) let reconnet = content=>{ } socket.on('push_event', function (data) {
//接收服务端传输的消息,然后调用reconnet方法进行数据展示 if(data.content!==""){ reconnet(data.content) } }) socket.on('disconnect', function () { console.log('已经下线') }) },