SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送

程序员文章站 2024-02-21 18:16:52

之前实现websocket基于stomp的，觉得springboot封装的太高，不怎么灵活，现在实现一个纯h5的，也大概了解websocket在内部是怎么传输的。 1.环...

之前实现websocket基于stomp的，觉得springboot封装的太高，不怎么灵活，现在实现一个纯h5的，也大概了解websocket在内部是怎么传输的。

1.环境搭建

因为在上一篇基于stomp协议实现的websocket里已经有大概介绍过web的基本情况了，所以在这篇就不多说了，我们直接进入正题吧，在springboot中，我们还是需要导入websocket的包。

在pox.xml加上对springboot对websocket的支持：

<!-- websocket --> 
<dependency> 
  <groupid>org.springframework.boot</groupid> 
  <artifactid>spring-boot-starter-websocket</artifactid> 
</dependency>

这里大概说一下自己的一点小见解：客户端与服务器建立websocket连接，实际上是创建了一个socket,这个socket是共享与客户端和服务器的。两者只要往对应的socket里操作，就可以实现双方实时通讯了

2.编码实现

一、在springboot中，添加websocket的配置

package com.cloud.sbjm.configure;
 
import org.springframework.context.annotation.configuration;
import org.springframework.web.socket.config.annotation.enablewebsocket;
import org.springframework.web.socket.config.annotation.websocketconfigurer;
import org.springframework.web.socket.config.annotation.websockethandlerregistry;
import com.cloud.sbjm.security.websocketinterceptor;
import com.cloud.sbjm.service.imp.myhandler;
 
 
//实现接口来配置websocket请求的路径和拦截器。
@configuration
@enablewebsocket
public class websocketh5config implements websocketconfigurer{
 
	@override
	public void registerwebsockethandlers(websockethandlerregistry registry) {
		
	  //handler是websocket的核心，配置入口
	  registry.addhandler(new myhandler(), "/myhandler/{id}").setallowedorigins("*").addinterceptors(new websocketinterceptor());
		
	}
 
	
}

1.@configuration：注解标识该类为spring的配置类

2.@enablewebsocket：开启注解接收和发送消息

3.实现websocketconfigurer接口，重写registerwebsockethandlers方法，这是一个核心实现方法，配置websocket入口，允许访问的域、注册handler、定义拦截器。客户端通过“/myhandler/{id}”直接访问handler核心类，进行socket的连接、接收、发送等操作，这里由于还加了个拦截器，所以建立新的socket访问时，都先进来拦截器再进去handler类，“new websocketinterceptor()”是我实现的拦截器，“new myhandler()”是我实现的一个handler类。

二、websocketinterceptor拦截器的实现：

package com.cloud.sbjm.security;
 
import java.util.map;
 
import javax.servlet.http.httpsession;
 
import org.springframework.http.server.serverhttprequest;
import org.springframework.http.server.serverhttpresponse;
import org.springframework.http.server.servletserverhttprequest;
import org.springframework.web.socket.websockethandler;
import org.springframework.web.socket.server.handshakeinterceptor;
 
public class websocketinterceptor implements handshakeinterceptor {
 
  //进入hander之前的拦截
  @override
  public boolean beforehandshake(serverhttprequest request, serverhttpresponse serverhttpresponse, websockethandler websockethandler, map<string, object> map) throws exception {
    if (request instanceof servletserverhttprequest) {
      string id = request.geturi().tostring().split("id=")[1];
      system.out.println("当前session的id="+id);
      servletserverhttprequest serverhttprequest = (servletserverhttprequest) request;
      httpsession session = serverhttprequest.getservletrequest().getsession();
      map.put("websocket_userid",id);
    }
    return true;
  }
 
  @override
  public void afterhandshake(serverhttprequest serverhttprequest, serverhttpresponse serverhttpresponse, websockethandler websockethandler, exception e) {
  	system.out.println("进来websocket的afterhandshake拦截器！");
  }
}

1.实现了handshakeinterceptor 接口，并实现了beforehandshake该方法，该方法是在进入handler核心类之前进行拦截。

这里主要实现的逻辑是：

截取客户端建立websocket连接时发送的url地址字符串，并通过对该字符串进行特殊标识截取操作，获取客户端发送的唯一标识（由自己定义的，一般是系统用户id唯一标识，用以标识该用户），并把它以键值对的形式放到session里，这样后期可以通过该session获取它对应的用户id了。【一个session对应着一个websocketsession】

三、myhandler核心类的实现

package com.cloud.sbjm.service.imp;
 
import java.io.ioexception;
import java.util.hashmap;
import java.util.map;
import java.util.set;
import net.sf.json.jsonobject;
import org.springframework.stereotype.service;
import org.springframework.web.socket.closestatus;
import org.springframework.web.socket.textmessage;
import org.springframework.web.socket.websockethandler;
import org.springframework.web.socket.websocketmessage;
import org.springframework.web.socket.websocketsession;
 
 
@service
public class myhandler implements websockethandler {
	
  //在线用户列表
  private static final map<string, websocketsession> users;
 
  
  static {
    users = new hashmap<>();
  }
  //新增socket
  @override
  public void afterconnectionestablished(websocketsession session) throws exception {
  	 system.out.println("成功建立连接");
  	 string id = session.geturi().tostring().split("id=")[1];
     system.out.println(id);
     if (id != null) {
       users.put(id, session);
       session.sendmessage(new textmessage("成功建立socket连接"));
       system.out.println(id);
       system.out.println(session);
     }
     system.out.println("当前在线人数："+users.size());
  }
 
  //接收socket信息
  @override
	public void handlemessage(websocketsession websocketsession, websocketmessage<?> websocketmessage) throws exception {
  	try{
	  	jsonobject jsonobject = jsonobject.fromobject(websocketmessage.getpayload());  	
	  	system.out.println(jsonobject.get("id"));
	  	system.out.println(jsonobject.get("message")+":来自"+(string)websocketsession.getattributes().get("websocket_userid")+"的消息");
	  	sendmessagetouser(jsonobject.get("id")+"",new textmessage("服务器收到了，hello!"));
  	 }catch(exception e){
   	  e.printstacktrace();
     }
		
	}
 
  /**
   * 发送信息给指定用户
   * @param clientid
   * @param message
   * @return
   */
  public boolean sendmessagetouser(string clientid, textmessage message) {
    if (users.get(clientid) == null) return false;
    websocketsession session = users.get(clientid);
    system.out.println("sendmessage:" + session);
    if (!session.isopen()) return false;
    try {
      session.sendmessage(message);
    } catch (ioexception e) {
      e.printstacktrace();
      return false;
    }
    return true;
  }
 
  /**
   * 广播信息
   * @param message
   * @return
   */
  public boolean sendmessagetoallusers(textmessage message) {
    boolean allsendsuccess = true;
    set<string> clientids = users.keyset();
    websocketsession session = null;
    for (string clientid : clientids) {
      try {
        session = users.get(clientid);
        if (session.isopen()) {
          session.sendmessage(message);
        }
      } catch (ioexception e) {
        e.printstacktrace();
        allsendsuccess = false;
      }
    }
 
    return allsendsuccess;
  }
 
 
  @override
  public void handletransporterror(websocketsession session, throwable exception) throws exception {
    if (session.isopen()) {
      session.close();
    }
    system.out.println("连接出错");
    users.remove(getclientid(session));
  }
 
  @override
  public void afterconnectionclosed(websocketsession session, closestatus status) throws exception {
    system.out.println("连接已关闭：" + status);
    users.remove(getclientid(session));
  }
 
  @override
  public boolean supportspartialmessages() {
    return false;
  }
 
  /**
   * 获取用户标识
   * @param session
   * @return
   */
  private integer getclientid(websocketsession session) {
    try {
      integer clientid = (integer) session.getattributes().get("websocket_userid");
      return clientid;
    } catch (exception e) {
      return null;
    }
  }
}

1.实现了websockethandler接口，并实现了关键的几个方法。

① afterconnectionestablished（接口提供的）：建立新的socket连接后回调的方法。主要逻辑是：将成功建立连接的websocketsssion放到定义好的常量[private static final map<string, websocketsession> users;]中去。这里也截取客户端访问的url的字符串，拿到标识，以键值对的形式讲每一个websocketsession存到users里，以记录每个socket。

② handlemessage（接口提供的）：接收客户端发送的socket。主要逻辑是：获取客户端发送的信息。这里之所以可以获取本次socket的id，是因为客户端在第一次进行连接时，拦截器进行拦截后，设置好id，这样也说明，双方在相互通讯的时候，只是对第一次建立好的socket持续进行操作。

③ sendmessagetouser（自己定义的）：发送给指定用户信息。主要逻辑是：根据用户id从常量users(记录每一个socket)中，获取socket,往该socket里发送消息，只要客户端还在线，就能收到该消息。

④sendmessagetoallusers （自己定义的）：这个广播消息，发送信息给所有socket。主要逻辑是：跟③类型，只不过是遍历整个users获取每一个socket,给每一个socket发送消息即可完广播发送

⑤handletransporterror（接口提供的）：连接出错时，回调的方法。主要逻辑是：一旦有连接出错的socket,就从users里进行移除，有提供该socket的参数，可直接获取id，进行移除。这个在客户端没有正常关闭连接时，会进来，所以在开发客户端时，记得关闭连接

⑥afterconnectionclosed（接口提供的）：连接关闭时，回调的方法。主要逻辑：一旦客户端/服务器主动关闭连接时，将个socket从users里移除，有提供该socket的参数，可直接获取id，进行移除。

后台的开发就开发完了，大家有没有发现比基于stomp协议实现要灵活得多？

四、客户端页面的实现【基于h5】

不需要加入任何的js包

<!doctype html>
<html>
 <head>
  <title>socket.html</title>
	
  <meta name="keywords" content="keyword1,keyword2,keyword3">
  <meta name="description" content="this is my page">
  <meta name="content-type" content="text/html" charset="utf-8">
  <!--<link rel="stylesheet" type="text/css" href="./styles.css" rel="external nofollow" >-->
 
 </head>
 
 <body>
	
	welcome<br/>
<input id="text" type="text" /><button onclick="send()">send</button>  <button onclick="closewebsocket()">close</button>
<div id="message">
</div>
  <!-- 公共js -->
  <script type="text/javascript" src="../websocket/jquery.min.js"></script>
 
	
<script type="text/javascript">
var userid="888";
var websocket=null;
 $(function() {
 
 //创建websocket
 connectwebsocket();
 })
 
  //强制关闭浏览器 调用websocket.close（）,进行正常关闭
 window.onunload = function() {
  	 
  //关闭连接  
  closewebsocket();  
  }
 
 //建立websocket连接
 function connectwebsocket(){
 	
	console.log("开始...");
   
   //建立websocket连接
    websocket = new websocket("ws://127.0.0.1:9091/cloud-sbjm/myhandler/id="+userid);
   
   //打开websokcet连接时，回调该函数
    websocket.onopen = function () {   
    console.log("onpen"); 
    }
    
    //关闭websocket连接时，回调该函数
    websocket.onclose = function () {
    //关闭连接  
    console.log("onclose");
    }
	
	  //接收信息
    websocket.onmessage = function (msg) {
    console.log(msg.data);
    }
 }
 
 //发送消息
 function send(){
   var postvalue={};
   postvalue.id=userid;
   postvalue.message=$("#text").val(); 	 	
   websocket.send(json.stringify(postvalue));
 }
 //关闭连接
 function closewebsocket(){
 	 if(websocket != null) {
      websocket.close();
    }
 }
 
</script>
 </body>
</html>

页面比较简单，简单解释一下：

1.new websocket("ws://127.0.0.1:9091/cloud-sbjm/myhandler/id="+userid)，与服务器建立websocket连接，后面的id="+userid，是动态参数，跟服务器配置handler的访问地址时对应"/myhandler/{id}"。

2.h5也提供多个回调函数

onopen：打开websokcet连接时，回调该函数

onclose：关闭websocket连接时，回调该函数

onmessage：服务器给该socket发送消息时，回调该函数，获取消息

websocket.send(json.stringify(postvalue));：给socket发送消息，服务器获取

websocket.close();客户端主要关闭连接，会触发客户端的onclose方法和服务器的afterconnectionclosed方法

到此服务端的开发也完成了，下面执行一下程序效果图：

一、建立连接

客户端：

SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送