websocket的简单使用

最新推荐文章于 2022-09-01 15:58:11 发布

宁晓

最新推荐文章于 2022-09-01 15:58:11 发布

阅读量1.3k

点赞数 1

分类专栏：前端后台开发文章标签： websocket 前后台实时通信

本文链接：https://blog.csdn.net/tarkuni/article/details/102605622

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

后台开发

8 篇文章 0 订阅

订阅专栏

项目中碰到从后台实时接收通知然后语音播放的需求，以前项目中调用过别人写的websocket接口，这次自己写了一下，分享下：

1.依赖的引入

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-websocket</artifactId>

<version>1.5.3.RELEASE</version>

</dependency>

以上是springboot工程的引入，如果是普通的war包部署tomcat可以如下配置：

<groupId>javax</groupId>

<artifactId>javaee-api</artifactId>

<scope>provided</scope>

</dependency>

2.声明注册使用@ServerEndpoint 注解，

@Configuration

public class WebSocketConfig {

@Bean

public ServerEndpointExporter serverEndpointExporter(){

return new ServerEndpointExporter();

} }

3.写服务类

@ServerEndpoint(value = "/websocket") //接受websocket请求路径
@Component  //注册到spring容器中
public class AlarmWebSocket {
    //保存所有在线socket连接
    private static Map<String,AlarmWebSocket> webSocketMap = new LinkedHashMap<>();

    //记录当前在线数目
    private static int count=0;

    //当前连接（每个websocket连入都会创建一个MyWebSocket实例
    private Session session;

    private Logger log = LoggerFactory.getLogger(this.getClass());
    //处理连接建立
    @OnOpen
    public void onOpen(Session session){
        this.session=session;
        webSocketMap.put(session.getId(),this);
        addCount();
        log.info("新的连接加入：{}",session.getId());
    }

    //接受消息
    @OnMessage
    public void onMessage(String message,Session session){
        log.info("收到客户端{}消息：{}",session.getId(),message);
        try{
            this.sendMessage("收到消息："+message);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

    //处理错误
    @OnError
    public void onError(Throwable error,Session session){
        log.info("发生错误{},{}",session.getId(),error.getMessage());
    }

    //处理连接关闭
    @OnClose
    public void onClose(){
        webSocketMap.remove(this.session.getId());
        reduceCount();
        log.info("连接关闭:{}",this.session.getId());
    }

    //群发消息

    //发送出去消息
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);//这里可以写死字符串测试
    }

    //广播消息
    public static void broadcast(String message){
        AlarmWebSocket.webSocketMap.forEach((k,v)->{
            try{
                v.sendMessage(message);
            }catch (Exception e){
            }
        });
    }

    //获取在线连接数目
    public static int getCount(){
        return count;
    }

    //操作count，使用synchronized确保线程安全
    public static synchronized void addCount(){
        AlarmWebSocket.count++;
    }

    public static synchronized void reduceCount(){
        AlarmWebSocket.count--;
    }
}

4.前端建立连接及发送消息测试

<html>

<head> <title>websocket测试</title> <meta charset="utf-8" /> </head>

<body>

let socket = new WebSocket("ws://localhost:8080/websocket");

socket.onerror = err => { console.log(err); };

socket.onopen = event => { console.log(event); };

socket.onmessage = mess => { console.log(mess); };

socket.onclose = () => { console.log("连接关闭"); };

function sendMessage() {

if (socket.readyState === 1) socket.send("这是向后台发送的测试数据");

else alert("还没成功建立websocket连接"); }

</script> </body> </html>

5.如果前台没问题，后台测试发送给前台消息

@RestController

public class TestController {

@GetMapping("/broadcast")

public void broadcast(){ MyWebSocket.broadcast();

} }

在浏览器F12打开前端日志，观察websocket状态，打印：

Event {isTrusted: true, type: "open", target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

type状态是open表示成功建立websocket连接，后台发送给前端消息，也可以打印出日志

宁晓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket的简单使用

项目中碰到从后台实时接收通知然后语音播放的需求，以前项目中调用过别人写的websocket接口，这次自己写了一下，分享下：1.依赖的引入<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket<...
复制链接

扫一扫