WebSocket的使用,前后端发送消息的例子

导读:本篇文章讲解 WebSocket的使用,前后端发送消息的例子,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一,什么是websocket

WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

二,websocket的原理

websocket约定了一个通信的规范,通过一个握手的机制,客户端和服务器之间能建立一个类似tcp的连接,从而方便它们之间的通信
在websocket出现之前,web交互一般是基于http协议的短连接或者长连接
websocket是一种全新的协议,不属于http无状态协议,协议名为”ws”
在这里插入图片描述

简单案例

前端代码:

created() { 
	// 页面创建 生命周期函数              
	this.initWebSocket()        
},        
destroyed: function () { 
	// 页面销毁生命周期函数              
	this.websocketclose();        
}, 
methods: {            
	initWebSocket: function () {                
		// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https                
		this.websock = new WebSocket("ws://127.0.0.1:9007/websocket");                
		this.websock.onopen = this.websocketonopen;                
		this.websock.onerror = this.websocketonerror;                
		this.websock.onmessage = this.websocketonmessage;                
		this.websock.onclose = this.websocketclose;              
	},              
	websocketonopen: function () {                
		console.log("WebSocket连接成功...");              
	},              
	websocketonerror: function (e) {                
		console.log("WebSocket连接发生错误...");
		console.log(e)              
	},              
	websocketonmessage: function (e) {                
		console.log(e.data);
		var alarm = JSON.parse(e.data)
		console.log(alarm.alarmName)
		if (e.data !== undefined) {
			this.onlineUser = e.data
		}         
	},              
	websocketclose: function (e) {                
		console.log("connection closed (" + e.code + ")");              
	}
	}

后端我使用的是springboot
依赖包:

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-websocket</artifactId>
 </dependency>

AlarmSocket.java

package com.youming.shuiku.datacenter.provider.service.alarm;

import com.alibaba.fastjson.JSON;
import com.youming.shuiku.datacenter.vo.alarm.AlarmRecordVo;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint("/websocket")
public class AlarmSocket {

    private Session session;

    private static CopyOnWriteArraySet<AlarmSocket> webSockets = new CopyOnWriteArraySet<>();
    private static Map<String, Session> sessionPool = new HashMap<String, Session>();
    /*
     * @description: 有新的连接加入
     * @author: wangxihao
     * @date:2022/8/30 15:16
     * @param: session
     **/
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSockets.add(this);
        sessionPool.put(session.getId(), session);
        // 新的连接加入 通知客户端
        sendMessageToAll(webSockets.size() + "");
        System.out.println("【websocket消息】有新的连接,总数为:" + webSockets.size());
    }
    /*
     * @description: websocket消息连接断开
     * @author: wangxihao
     * @date:2022/8/30 15:16
     **/
    @OnClose
    public void onClose() {
        webSockets.remove(this);
        // 断开连接 通知客户端
        sendMessageToAll(webSockets.size() + "");
        System.out.println("【websocket消息】连接断开,总数为:" + webSockets.size());
    }
    /*
     * @description: websocket消息收到客户端消息
     * @author: wangxihao
     * @date:2022/8/30 15:16
     * @param: message
     **/
    @OnMessage
    public void onMessage(String message) {
        System.out.println("websocket消息收到客户端消息:" + message);
    }
    /**
     * 通知所有的客户端
     *
     * @param message
     */
    public static void sendMessageToAll(String message) {
        for (AlarmSocket webSocket : webSockets) {
            System.out.println("【websocket】通知所有的客户端:" + message);
            try {
                webSocket.session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    
    /*
     * @description: 发送到大屏险情报警
     * @author: wangxihao
     * @date:2022/8/30 15:18
     * @param: alarmRecordVo
     **/
    public static void sendAlarmVo(AlarmRecordVo alarmRecordVo){
        for (AlarmSocket webSocket : webSockets) {
            System.out.println("【websocket】通知所有的客户端:" + alarmRecordVo);
            try {
                webSocket.session.getAsyncRemote().sendText(JSON.toJSONString(alarmRecordVo));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

@ServerEndpoint注解和RestController的作用大差不差

使用的时候只需要调用这个方法
在这里插入图片描述

结果:
信息已被接收在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/75426.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!