通过实现简单聊天室了解websocket的基础使用

websocket基础使用

用到的依赖包

• websocket的依赖

  <dependency>
  	<groupId>javax.websocket</groupId>
      <artifactId>javax.websocket-api</artifactId>
      <version>1.1</version>
      <scope>provided</scope>
  </dependency>
  

• json-lib的依赖

  <dependency>
  	<groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
  </dependency>
  

  服务端代码实现

• 服务端需要Servlet3.0的注解

  @ServerEndpoint("/websocket/{name}") ： 用于标记该类为websocket服务端类

  name用于记录当前websocket是谁，用于区分连接的用户

  servlet是单例对象，websocket是多里对象，因为他需要实时连接，与要知道每个连接是谁
  
  （解释都在注释里，不多赘述）

  public class WebSocket {
      private String name;//用于记录当前websocket是谁，用于区分连接的用户
      private Session session; //webSocket中的session 链接，用于记录当前的连接
  
      private static Map<String,WebSocket> allClients = new HashMap<>();
  
      public Session getSession(){
          //...
      }
  
      public void setSession() {
          //...
      }
  
      /**
        *
        * @param name 嗲表地址参数中的name
        * @param session 当前建立的链接
        */
      @OnOpen  //标志建立连接的注释
      public void openConnection(@PathParam("name") String name,Session session){
          this.name = name;
          this.session = session;
          allClients.put(name,this);//将name与webSocket绑定
      }
  
      /**
        * 当服务器接受到消息时触发
        * @param message
        * @param session 当前建立的链接
        */
      @OnMessage //用于接收客户端发来的消息，这个地方应该根据自己的实际业务需求，来决定到底写什么
      public void onMessage(Session session,String message) {
          //1.首先解析发过来的内容，找到目标接收者：通过名字找到名字对应的websocket对象，获取websocket对象中的session，创建一个固定容器用于存放对应key-value值：String-WebSocket
          JSONObject jsonObject  JSONObject.fromObject(message);
  
          //与前端约定，接收者为toUser，发送信息内容为toMessage
          String to = jsonObject.getString("toUser");//找到接收者
          String toMessage = jsonObject.getString("toMessage");//获取到发送的内容
          //2.根据目标接收者，找到它的session链接
          WebSocket webSocket = allClients.get(to);//获取到目标接收者的webSocket
          //3.通过session发消息
          if(WebSocket != null){
              Session toSession = webSocket.getSession();//获取到服务器和目标接收者的链接
  			if(toSession.isOpen()) {
                  //toSession为要发送的目标者,getAsyncRemote获得链接的相对的另一端
                  toSession.getAsyncRemote().sendText(toMessage);
              }
          }else {
              //正常来说应该缓存这个消息，这里我就直接发送留言，对方不在线
              session.getAsyncRemote().sendText("对方不在线");
          }
  
      }
  
      /**
        * 当服务器发生异常时触发
        * @param e 可抛出的异常
        * @param session 哪个链接出现了异常
        */
      @OnError
      public void onError(Session session,Throwable e) {
  
      }
  
      /**
        * 当链接关闭的时候触发
        * @param e 可抛出的异常
        * @param session 哪个链接出现了异常
        */
      @OnClose
      public void onClose(Session session){
  
      }
  
  }
  

  客户端js代码

  var websocket = null;
  
  //-------------===客户端获取websocekt链接===-----------------
  function connection(){
      var username="";//对应服务端的name TODO：更具具体情况获得一个username用于表示当前的链接
      //首先判断当前浏览器是否支持websocket
      if('WebSocket' in window) {
          //创建websocket
          websocket = new WebSocket("ws://"+document.location.host+"/websocket"+username);
      }else{
          alert('当前浏览器不支持websocket');
      }
  
      //建立链接的回调
      websocket.onopen = function() {
          console.log("链接建立了")
      }
  
      //收到消息时
      websocket.onmessage = function(event) {
         	//获得消息，并打印
          console.log(event.data)
      }
  
      websocket.onerror = function() {
          console.log("出现异常了")
      }
  
      websocket.onclose = function() {
          console.log("链接关闭了")
      }
  
      //当浏览器的页面窗口关闭的时候，此时应该关闭链接，防止服务器出现异常
      window.onbeforeunload = = function() {
          if (websocket!=null){
              websocket.close();
          }
      }
  }
  
  //------------==发送消息==-----------
  function sendMessage(){
      //1.获取到发送给谁
      var toUser = "";//Dom操作，此处省略了
      //2.获取到发送的内容
      var toMessage = ""//Dom操作，此处省略了
  
      if(websocket!=null) {
         	//拼json串
          var message = "{'toUser':"+toUser+","+"'toMessage':"+toMessage+"}";】
          //发送json串
          websocket.send(message);
      }
  }