前言

公司项目需要用到消息提示,那么WebSocket它来了经过我面向百度的学习，废话不多说直接开干.

后端搭建

一、依赖导入

            org.springframework.boot
            spring-boot-starter-websocket
        

二、搭建websocket服务

1.WebSocketConfig配置文件

package top.yangbuyi.service_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 WebSocketConfig {


	
	@Bean
	public ServerEndpointExporter serverEndpointExporter() {
		return new ServerEndpointExporter();
	}
}

2.WebSocketServer服务

package top.yangbuyi.service_websocket.server;

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.Date;
import java.util.concurrent.CopyOnWriteArraySet;


@ServerEndpoint("/service_websocket/wspoint/{loginName}")
@Component
public class WebSocketServer {

    
    private static final CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();

    
    private Session session;

    
    private String loginName = "";


    
    @onOpen
    public void onOpen(Session session, @PathParam("loginName") String loginName) {
        // 前端连接得到登陆名称
        this.loginName = loginName;
        // 当前websokcet生成的会话
        this.session = session;
        webSocketSet.add(this);
        try {
            sendMessage("success");
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }


    
    @onClose
    public void onClose() {
        webSocketSet.remove(this);
    }


    
    @onMessage
    public void onMessage(String message, Session session) {
        System.out.println("接收到来自[" + message + "]发送的消息" + session);
        // 发送消息
//        for (WebSocketServer item : webSocketSet) {
//            try {
//                item.sendMessage(message + ",时间:" + new Date() + session);
//            } catch (Exception e) {
//                e.printStackTrace();
//            }
//        }
    }

    
    @onError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    
    public void sendMessage(String message) {
        try {
             // 建议加个同步锁 
            if (this.session != null) {
                this.session.getBasicRemote().sendText(message);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    
    public static void sendInfo(String userName, String msgStr) {
        for (WebSocketServer item : webSocketSet) {
            if (item.loginName.equals(userName)) {
                item.sendMessage(msgStr);
            }
        }
    }
}

前端搭建

一、index.vue