websocket前后端交互通讯

Posted 凡客丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了websocket前后端交互通讯相关的知识,希望对你有一定的参考价值。

websocket协议是用于前后端长链接交互的技术,此技术多用于交互不断的场景,比如说类似于微信。QQ两者或者多者之间的交互;

websocket的前端四个注解 对应于后端的四个注解方法,对应触发时间就会对应后端接收消息,

@OnOpen,链接成功交互初始化
@OnClose,关闭事件
@OnMessage,消息事件
@OnError 异常事件

本文只是简单的记录一下项目中用到的场景,并没有详细记录,需要了解的可以查看官方文档;

一、引入WebSocket Jar包


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

二、创建WebSocket 配置类

该配置类用于检测带注解@ServerEndpoint 的bean 并将它们注册到容器中。

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
 
 
@Configuration
@Slf4j
public class WebSocketConfig 
    /**
     * 给spring容器注入这个ServerEndpointExporter对象
     * 相当于xml:
     * <beans>
     * <bean id="serverEndpointExporter" class="org.springframework.web.socket.server.standard.ServerEndpointExporter"/>
     * </beans>
     * <p>
     * 检测所有带有@serverEndpoint注解的bean并注册他们。
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() 
        log.info("serverEndpointExporter被注入了");
        return new ServerEndpointExporter();
    

三、创建WebSocket 处理类

@Component
@Slf4j
@ServerEndpoint("/websocket/coreCode/employeeCode")//请求案例:// 接口路径 ws://localhost:8087/webSocket/userCode;
public class WebsocketService 
 
    private Session session;//与某个客户端的连接会话,需要通过它来给客户端发送数据
 
    //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
    //虽然@Component默认是单例模式的,但springboot还是会为每个websocket连接初始化一个bean,所以可以用一个静态set保存起来。
    //  注:底下WebSocket是当前类名
    private static CopyOnWriteArraySet<WebsocketService> webSockets = new CopyOnWriteArraySet<>();
    // 用来存在线连接数
    private static Map<String, Session> sessionPool = new HashMap<String, Session>();
 
    // 用来存储当前用户登录的归属核企
    private static Map<String, String> coreMap = new HashMap<String, String>();
 
    private String employeeCode;  //每次链接访问的时候,都是一个新的请求,所以这个变量是不会覆盖的
 
    /**
     * 链接成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam(value = "coreCode") String coreCode, @PathParam(value = "employeeCode") String employeeCode) 
        try 
            this.session = session;
            this.employeeCode = employeeCode;
            webSockets.add(this);
            sessionPool.put(employeeCode, session);
            if (coreMap.containsKey((employeeCode))) 
                coreMap.remove(employeeCode);
                //加入map
            
            coreMap.put(employeeCode, coreCode);
            log.info("【websocket消息】有新的连接,总数为:" + webSockets.size());
         catch (Exception e) 
            log.error("websocket链接失败:", e.getMessage());
        
    
 
    /**
     * 链接关闭调用的方法<br>    *此方法关闭事件,不管是关闭浏览器还是直接退出或者超时回话都会触发这个接口<br>
     */
    @OnClose
    public void onClose() 
        try 
            webSockets.remove(this);
            if (coreMap.containsKey(employeeCode)) 
                coreMap.remove(employeeCode);
            
            if(sessionPool.containsKey(employeeCode))
                sessionPool.remove(employeeCode);
            
            log.info("【websocket消息】连接断开,总数为:" + webSockets.size());
         catch (Exception e) 
            log.error("websocket关闭失败:", e.getMessage());
        
    
 
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     */
    @OnMessage
    public void onMessage(String message) 
        log.info("【websocket消息】收到客户端消息:" + message);
    
 
    /**
     * 发送错误时的处理
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) 
        log.error("用户错误,原因:" + error.getMessage());
        error.printStackTrace();
    
 
 
    /**
     * 全部人员消息
     *
     * @param message
     */
    public void sendAllMessage(String message) 
        log.info("【websocket消息】全部人员消息:" + message);
        for (WebsocketService webSocket : webSockets) 
            try 
                if (webSocket.session.isOpen()) 
                    webSocket.session.getAsyncRemote().sendText(message);
                
             catch (Exception e) 
                e.printStackTrace();
                log.error("全部人员发送消息失败:", e.getMessage());
            
        
    
 
    /**
     * 点对点发送指定人消息
     *
     * @param employeeCode
     * @param message
     */
    public void sendOneMessage(String employeeCode, String message) 
        Session session = sessionPool.get(employeeCode);
        if (session != null && session.isOpen()) 
            try 
                log.info("【websocket消息】 点对点发送指定人消息:" + message);
                session.getAsyncRemote().sendText(message);
             catch (Exception e) 
                e.printStackTrace();
                log.error("点对点发送指定人消息:", e.getMessage());
            
        
    
 
    /**
     * 发送指定多个人员消息
     *
     * @param employeeCodes
     * @param message
     */
    public void sendMoreMessage(String[] employeeCodes, String message) 
        for (String employeeCode : employeeCodes) 
            Session session = sessionPool.get(employeeCode);
            if (session != null && session.isOpen()) 
                try 
                    log.info("【websocket消息】 发送指定多个人员消息:" + message);
                    session.getAsyncRemote().sendText(message);
                 catch (Exception e) 
                    e.printStackTrace();
                    log.error("发送指定多个人员消息:", e.getMessage());
                
            
        
    
 
    /**
     * 点对点发送指定场景人员编码消息
     *
     * @param centres
     * @param configTemplates
     */
    public void sendScenetOneMessage(List<InformationCentre> centres, InformationConfigTemplate configTemplates, String code) 
        log.info("当前存储的用户编码和核企的关系集合:,session集合:",coreMap,sessionPool);
        centres.stream().forEach(item -> 
            String value = coreMap.get(item.getEmployeeCode());
            if(StrUtil.isNotBlank(value))
                //判断是否是全部核企还是部分核企,如果是部分核企,当前登录人员所属核企消息发送对象是否包含
                if ("PART".equals(configTemplates.getScope()) && StrUtil.isNotBlank(configTemplates.getCoreStrand())) 
                    List<InformationCofigCore> informationCofigCores = JSONUtil.toList(configTemplates.getCoreStrand(), InformationCofigCore.class);
                    List<String> coreList = informationCofigCores.stream().map(InformationCofigCore::getCoreCode).collect(Collectors.toList());
                    String coreCodeMap = coreMap.get(item.getEmployeeCode());
                    if (!coreList.contains(coreCodeMap)) 
                        return;
                    
                
                if (InformationEnum.INTERNALINFORMATIONCHANNEL.code.equals(code)) 
                    //发送给当前登录人消息
                    Session session = sessionPool.get(item.getEmployeeCode());
                    if (session != null && session.isOpen()) 
                        try 
                            log.info("【websocket消息】 点对点发送指定人消息:" + item);
                            session.getAsyncRemote().sendText(JSONUtil.toJsonStr(item));
                         catch (Exception e) 
                            e.printStackTrace();
                            log.error("点对点发送指定人消息:", e.getMessage());
                        
                    
                
            
        );
    

前后端常用通讯方式-- ajax websocket

一、前后端常用通讯方式

     1. ajax   

  浏览器发起请求,服务器返回数据,服务器不能主动返回数据,要实现实时数据交互只能是ajax轮询(让浏览器隔个几秒就发送一次请求,然后更新客户端显示。这种方式实际上浪费了大量流量并且对服务端造成了很大压力)。

     2. websocket

        websocket是HTML5出的东西(协议),是一种全双工通信机制,两端可以及时地互发事件,互发数据,相互通信,只需要浏览器和服务器建立一次连接,服务器就可以主动推送数据到浏览器实现实时数据更新。

    原生 websocket 支持到IE11 ,实际开发中,有比较著名的两个库socket.io(英文版中文版可能跟新不及时) 和 sockjs , 它们都对原始的API做了进一步封装和兼容IE,提供了更多功能,都分为客户端和服务端的实现,实际应用中,可以选择使用。

  websocket  的实现需要后端搭建一个WebSocket服务器,但是如果想搭建一个WebSocket服务器就没有那么轻松了,因为WebSocket是一种新的通信协议,目前还是草案,没有成为标准,市场上也没有成熟的WebSocket服务器或者Library实现WebSocket协议,我们就必须自己动手写代码去解析和组装WebSocket的数据包。要这样完成一个WebSocket服务器,估计所有的人都想放弃,幸好的是市场上有几款比较好的开源库供我们使用,比如 PyWebSocket,WebSocket-Node, LibWebSockets等等,这些库文件已经实现了WebSocket数据包的封装和解析,我们可以调用这些接口,这在很大程度上减少了我们的工作量。

二、关于socket.io

  socket.io设计的目标是支持任何的浏览器,任何Mobile设备。目前支持主流的PC浏览器 (IE,Safari,Chrome,Firefox,Opera等),Mobile浏览器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。socket.io基于node.js并简化了WebSocket API,统一了通信的API。它支持:WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling。
      socket.io解决了实时的通信问题,并统一了服务端与客户端的编程方式。启动了socket以后,就像建立了一条客户端与服务端的管道,两边可以互通有无。

三、socket.io 中对 websocket  的使用

  1.服务端

  io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socket

  io.sockets.emit(‘String’,data);//给所有客户端广播消息

  io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息

  socket.on(‘String’,function(data));//监听客户端发送的信息

  socket.emit(‘String’, data);//给该socket的客户端发送消息

   广播消息

 //给除了自己以外的客户端广播消息
 socket.broadcast.emit("msg",{data:"hello,everyone"}); 
 //给所有客户端广播消息
 io.sockets.emit("msg",{data:"hello,all"});

  分组

 socket.on(‘group1‘, function (data) {
        socket.join(‘group1‘);
 });
 socket.on(‘group2‘,function(data){
        socket.join(‘group2‘);
 });

   客户端发送

 socket.emit(‘group1’),就可以加入group1分组;
 socket.emit(‘group2’),就可以加入group2分组;

一个客户端可以存在多个分组(订阅模式)

  踢出分组

  socket.leave(data.room);

  对分组中的用户发送信息

  //不包括自己
  socket.broadcast.to(‘group1‘).emit(‘event_name‘, data);
  //包括自己
  io.sockets.in(‘group1‘).emit(‘event_name‘, data);

  broadcast方法允许当前socket client不在该分组内

  获取连接的客户端socket

  io.sockets.clients().forEach(function (socket) {
    //.....
  })

  获取分组信息

  //获取所有房间(分组)信息
  io.sockets.manager.rooms
  //来获取此socketid进入的房间信息
  io.sockets.manager.roomClients[socket.id]
  //获取particular room中的客户端,返回所有在此房间的socket实例
  io.sockets.clients(‘particular room‘)

  另一种分组方式

 io.of(‘/some‘).on(‘connection‘, function (socket) {
     socket.on(‘test‘, function (data) {
         socket.broadcast.emit(‘event_name‘,{});
    });
  });

   客户端

var socket = io.connect(‘ws://103.31.201.154:5555/some‘)
socket.on(‘even_name‘,function(data){
   console.log(data);
})

   客户端都链接到ws://103.31.201.154:5555 但是服务端可以通过io.of(‘/some’)将其过滤出来。

   另外,Socket.IO提供了4个配置的API:io.configure, io.set, io.enable, io.disable。其中io.set对单项进行设置,io.enable和io.disable用于单项设置布尔型的配置。io.configure可以让你对不同的生产环境(如devlopment,test等等)配置不同的参数。

  2.客户端

  建立一个socket连接

  var socket = io(“ws://103.31.201.154:5555”);

   监听服务消息

socket.on(‘msg‘,function(data){
    socket.emit(‘msg‘, {rp:"fine,thank you"}); //向服务器发送消息
    console.log(data);
});

   socket.on(“String”,function(data)) 监听服务端发送的消息 Sting参数与服务端emit第一个参数相同

  监听socket断开与重连。

socket.on(‘disconnect‘, function() {
    console.log("与服务其断开");
});


socket.on(‘reconnect‘, function() {
    console.log("重新连接到服务器");
});
  客户端socket.on()监听的事件:
  connect:连接成功
  connecting:正在连接
  disconnect:断开连接
  connect_failed:连接失败
  error:错误发生,并且无法被其他事件类型所处理
  message:同服务器端message事件
  anything:同服务器端anything事件
  reconnect_failed:重连失败
  reconnect:成功重连
  reconnecting:正在重连
  当第一次连接时,事件触发顺序为:connecting->connect;当失去连接时,事件触发顺序为:disconnect->reconnecting(可能进行多次)->connecting->reconnect->connect。
 

  

以上是关于websocket前后端交互通讯的主要内容,如果未能解决你的问题,请参考以下文章

前后端常用通讯方式-- ajax websocket

从零玩转Websocket实时通讯服务之前后端分离版本-websocket

node+小程序+web端简单的websocket通讯

浅析即时通讯开发WebSocket热门疑问

微信小程序webSocket生命周期

flask websocket