Websocket实现消息推送基于SpringBoot+uniapp实现

原创已于 2023-08-17 05:03:25 修改 · 1.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #spring boot #uni-app #java #网络协议

于 2023-08-17 02:53:22 首次发布

本文介绍了如何在SpringBoot项目中结合uniapp使用WebSocket进行双向通信，包括WebSocket的工作原理、依赖导入、服务端配置和控制层逻辑，以及uniapp客户端的连接和消息处理示例。

文章目录

前言
一、Websocket是什么？
二、代码
总结

前言

WebSocket协议使用标准的HTTP握手过程来建立连接，然后通过在已建立的连接上进行数据交换。这使得WebSocket非常适用于实时聊天、在线游戏、实时数据更新等场景。

本文就介绍了Websocket实现消息推送基于SpringBoot+uniapp实现

一、WebSocket是什么？

WebSocket是一种用于在客户端和服务器之间进行双向通信的网络协议。它建立在HTTP协议上，通过在单个TCP连接上提供全双工通信，允许服务器主动向客户端推送数据。

与传统的HTTP请求-响应模型不同，WebSocket允许服务器和客户端之间实时地进行双向通信。一旦建立了WebSocket连接，客户端和服务器就可以通过发送消息来直接进行通信，而不需要每次都发起新的HTTP请求。

二、使用步骤

1.导入部分依赖

代码如下：

         <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-amqp</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.72</version>
        </dependency>

2.服务端代码(部分，实体类请根据需求自行创建)

注意：实体类请根据需求自行创建

代码如下：

package com.recovery.garbage.websocket.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;


@Configuration
public class WebSocketStompConfig {
    //这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket  ,如果你使用外置的tomcat就不需要该配置文件
    @Bean
    public ServerEndpointExporter serverEndpointExporter()
    {
        return new ServerEndpointExporter();
    }
}

Service层

package com.recovery.garbage.websocket.service;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.google.common.collect.Maps;
import com.recovery.garbage.Bean.Chat;
import com.recovery.garbage.Bean.Order;
import com.recovery.garbage.Service.Mapper.ChatMapper;
import com.recovery.garbage.utils.ResultUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
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.Set;
import java.util.concurrent.ConcurrentHashMap;

@Component
@ServerEndpoint(value = "/connectWebSocket/{status}/{userId}")
//status=0用户 1=骑手
public class WebSocket {

    private Logger logger = LoggerFactory.getLogger(this.getClass());
    /**
     * 在线人数
     */
    public static int onlineNumber = 0;
    /**
     * 以用户的姓名为key，WebSocket为对象保存起来
     */
    private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>();
    /**
     * 会话
     */
    private Session session;
    /**
     * 用户名称
     */
    private String userId;
    /**
     * 建立连接
     *
     * @param session
     */

    private int status;

    @Autowired
    private ChatMapper chatMapper;

    @OnOpen
    public void onOpen(@PathParam("status") int status,@PathParam("userId") String userId, Session session)
    {
        onlineNumber++;

        logger.info("现在来连接的客户id："+session.getId()+"用户名："+userId);
        this.userId = userId;
        this.session = session;
        this.status=status;

        //  logger.info("有新连接加入！ 当前在线人数" + onlineNumber);
        //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
        //先给所有人发送通知，说我上线了
        Map<String,Object> map1 = Maps.newHashMap();
        map1.put("messageType",1);
        map1.put("userId",userId);
        if(this.status==0){
            map1.put("status",0);
        }else if(this.status==1){
            map1.put("status",1);
        }

        //sendMessageAll(JSON.toJSONString(map1),userId);

        //把自己的信息加入到map当中去
        clients.put(userId, this);
        logger.info("有连接关闭！ 当前在线人数" + clients.size());
        //给自己发一条消息：告诉自己现在都有谁在线
        Map<String,Object> map2 = Maps.newHashMap();
        map2.put("messageType",3);
        //移除掉自己
        Set<String> set = clients.keySet();
        map2.put("onlineUsers",set);
        //sendMessageTo(JSON.toJSONString(map2),userId);
    }

    @OnError
    public void onError(Session session, Throwable error) {
        logger.info("服务端发生了错误"+error.getMessage());
        //error.printStackTrace();
    }
    /**
     * 连接关闭
     */
    @OnClose
    public void onClose()
    {
        onlineNumber--;
        //webSockets.remove(this);
        clients.remove(userId);
        try {
            //messageType 1代表上线 2代表下线 3代表在线名单  4代表普通消息
            Map<String,Object> map1 = Maps.newHashMap();
            map1.put("messageType",2);
            map1.put("onlineUsers",clients.keySet());
            map1.put("userId",userId);
            sendMessageAll(JSON.toJSONString(map1),userId);
        }
        catch (IOException e){
            logger.info(userId+"下线的时候通知所有人发生了错误");
        }
        //logger.info("有连接关闭！ 当前在线人数" + onlineNumber);
        logger.info("有连接关闭！ 当前在线人数" + clients.size());
    }

    /**
     * 收到客户端的消息
     *
     * @param message 消息
     * @param session 会话
     */
    @OnMessage
    public void onMessage(String message, Session session)
    {
        try {
            logger.info("来自客户端消息：" + message+"客户端的id是："+session.getId());

            System.out.println("------------  :"+message);

            JSONObject jsonObject = JSON.parseObject(message);
            String textMessage = jsonObject.getString("message");
            String fromuserId = jsonObject.getString("userId");
            String touserId = jsonObject.getString("to");
            //如果不是发给所有，那么就发给某一个人
            //messageType 1代表上线 2代表下线 3代表在线名单  4代表普通消息
            Map<String,Object> map1 = Maps.newHashMap();
            map1.put("messageType",4);
            map1.put("textMessage",textMessage);
            map1.put("fromuserId",fromuserId);
            if(touserId.equals("All")){
                map1.put("touserId","所有人");
                sendMessageAll(JSON.toJSONString(map1),fromuserId);
            }
            else{
                map1.put("touserId",touserId);
                System.out.println("开始推送消息给"+touserId);
                sendMessageTo(JSON.toJSONString(map1),touserId);
            }
        }
        catch (Exception e){

            e.printStackTrace();
            logger.info("发生了错误了");
        }

    }


    public void sendMessageTo(String message, String TouserId) throws IOException {
        for (WebSocket item : clients.values()) {
            if (item.userId.equals(TouserId) ) {
                item.session.getAsyncRemote().sendText(message);
                break;
            }
        }
    }


    public void AcceptOrderSendFromId(String orderId,String fromId){
        for (WebSocket item : clients.values()) {
            //    System.out.println("在线人员名单  ："+item.userId.toString());
            if (item.userId.equals(fromId) ) {
                item.session.getAsyncRemote().sendText(fromId);
                break;
            }
        }

    }


    public void sendOrder(Order order) throws IOException {
        for (WebSocket item : clients.values()) {
            if(item.status==1) {
                System.out.println(JSON.toJSONString(order));
                item.session.getAsyncRemote().sendText(JSON.toJSONString(order));
            }
        }
    }



    public ResultUtil sendMessageToChat(String FromUserId ,String message, String TouserId) throws IOException {
        Chat chatEn=new Chat();
        chatEn.setFromOpenId(FromUserId);
        chatEn.setContent(message);
        chatEn.setToOpenId(TouserId);
        for (WebSocket item : clients.values()) {
            //    System.out.println("在线人员名单  ："+item.userId.toString());
            if (item.userId.equals(TouserId) ) {
                item.session.getAsyncRemote().sendText(message);
                chatEn.setState(1);
                chatMapper.insert(chatEn);
                logger.info("插入成功");
                //webSocket.sendMessageToChat(FormUserid,message,TouserId);
                return ResultUtil.sucess("用户在线");
            }
        }
        chatEn.setState(0);
        chatMapper.insert(chatEn);
        //webSocket.sendMessageToChat(FormUserid,message,TouserId);
        logger.info("插入成功");
        logger.info("用户不在线:"+TouserId);
        return ResultUtil.sucess("用户不在线");
    }




    public void sendMessageAll(String message,String FromuserId) throws IOException {
        for (WebSocket item : clients.values()) {
            item.session.getAsyncRemote().sendText(message);
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineNumber;
    }

}

Controller层

package com.recovery.garbage.websocket.controller;

import com.recovery.garbage.Bean.Order;
import com.recovery.garbage.websocket.service.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.IOException;

@RestController
public class websocketController {
    @Autowired
    WebSocket webSocket;


    @GetMapping("/sendTo")
    public String sendTo(@RequestParam("userId") String userId, @RequestParam("msg") String msg) throws IOException {
        webSocket.sendMessageTo(msg,userId);
        return "推送成功";
    }

    @PostMapping("/sendOrder")
    public String sendOrder(@RequestBody Order order) throws IOException {
        System.out.println(order);
        webSocket.sendOrder(order);
        return "推送订单";
    }



    @PostMapping("/sendAll")
    public String sendAll(@RequestParam("fromId") String fromId) throws IOException {
        System.out.println(fromId);

        webSocket.sendMessageAll("接收", fromId);
        return "推送全部人";
    }

    @GetMapping("/acceptOrder")
    public String acceptOrder(@RequestParam("fromId") String fromId,@RequestParam("orderId")String orderId){
        webSocket.AcceptOrderSendFromId(orderId, fromId);
        return "已接受订单:"+orderId;
    }





}

3.Uniapp代码(部分，根据需求自行修改)

			connectionWebSocket() {
				let that = this
				//连接
				this.socketTask = uni.connectSocket({
					url: WebScocket_URL+uni.getStorageSync("UserInfo").open_id,
					success() {
						console.log('websocket连接成功')
					}

				});
				//打开websocket回调1
				uni.onSocketOpen(function(res) {
		
					console.log('消息连接成功')
					//showMsg('消息连接成功');
					// 每隔5秒钟发送一次心跳，避免websocket连接因超时而自动断开
				setInterval(function() {
						uni.sendSocketMessage({
						data: '心跳检测'
						});
					}, 30 * 1000);
				});
				//连接失败回调
				uni.onSocketError(function(res) {
					//uni.setStorageSync(config.cachePrefix + 'webSocketOnLine', false);
					console.log("消息连接失败")
					// showMsg('消息连接失败');
				});
				//关闭websocket打印
				uni.onSocketClose(function(res) {
					//uni.setStorageSync(config.cachePrefix + 'webSocketOnLine', false);
					// showMsg('消息连接已关闭');
				});
				//服务端过来内容之后打印
				uni.onSocketMessage(function(res) {
					console.log(res);
					
					console.log(that)
					console.log(that.$refs)
					that.$refs.uNotify.show({
						top: 0,
						type: 'success',
						color: '#000',
						bgColor: '#aaff7f',
						message: res.data,
						duration: 2000,
						fontSize: 10,
						//safeAreaInsetTop:true
					})
					
				});
			}

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。