前端WebSocket 引用以及使用，测试以及解决404问题

提示：根据自身经验和一些网上的资料总结出一些WebSocket的知识；

首先了解webSocket的原理：

https://www.runoob.com/html/html5-websocket.html

 

文章目录

•  
• Tomcat实现websocket方法
• 引入：maven下

  利用javax扩展包下的websocket API开发的websocket服务部署正常，代码如下：

  构建maven工程，引入项目依赖jar包：

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

• java代码：

• package com.ict.web.modules.command.web;
  
  import javax.websocket.server.ServerEndpoint;
  
  import org.springframework.stereotype.Component;
  
  
  import org.slf4j.Logger;
  import org.slf4j.LoggerFactory;
  
  import javax.websocket.*;
  import javax.websocket.server.PathParam;
  
  import java.io.IOException;
  import java.util.Map;
  import java.util.concurrent.ConcurrentHashMap;
  
  
  @ServerEndpoint(value = "/websocketTest/{userId}")
  @Component
  public class DemoWebsocket  {
  	private static Logger logger = LoggerFactory.getLogger(DemoWebsocket.class);
  	 
      private String userId;
      private Session session;
   
      /**
       * 以用户的姓名为key,websocket为对象保存起来
       */
      private static Map<String, DemoWebsocket> clients = new ConcurrentHashMap<>();
      
      @OnOpen
      public void onOpen(@PathParam("userId") String userId, Session session) {
          logger.debug("新连接：{}", userId);
          //首先要判断该ID是否已经加入，如果已经加入不重复加入
          if (!isEmpty(userId)) {
              this.userId = userId;
              this.session = session;
              clients.put(userId, this);
              logger.info("现在连接的客户编码为：" + userId);
          }
      }
   
      /**
       * 关闭时执行
       */
      @OnClose
      public void onClose() {
      
      	//clients.remove(this.userId);
          logger.debug("连接：{} 关闭", this.userId);
      }
   
      /**
       * 收到消息时执行
       *
       * @param message
       * @param session
       */
      @OnMessage
      public void onMessage(String message, Session session) {
          logger.debug("收到用户{}的消息{}", this.userId, message);
          //回复用户
          //session.getAsyncRemote().sendText("收到 " + this.userId + " 的消息:" + message);
          //发送消息： 
          if(1<2){
          	 sendAll(message);
          }
      }
   
       /**
           * 给所有人发消息
           * @param message
           */
        private void sendAll(String message) {
      	  //recoverycz_1221accid_时间戳(1221突发事件id)
      	  String[] messageArrays = message.split("_");
            String  newMessage = messageArrays[0];//发送信息内容 
            String  userIdaccid = messageArrays[1]; //发送者 发送同个突发事件的不同浏览器
            
            //遍历 用户 全部 发送 
            
            for(String key:clients.keySet()){
          	  
          	  //判断 用户是否存在;
          	  try {
          		 // DemoWebsocket demoWebsocket = clients.get(key);
  				  //clients.get(key).sendMessage(newMessage);
          		  String key2=key;  
          		  if(key2.contains(userIdaccid)){  //判断是不是 同一个突发事件 ，如果是发送给同一个事件不同的浏览器 ;
          			  sendMessageToUser(key,newMessage);
          		  }
  				  
  			} catch (Exception e) {
  				// TODO Auto-generated catch block
  				e.printStackTrace();
  			}
          	  
            }
        }
  
       //发送信息 
       public void sendMessage(String message) throws IOException {
      	   session.getAsyncRemote().sendText( message);
       }
      	
      /**
       * 连接错误时执行
       *
       * @param session
       * @param error
       */
      @OnError
      public void onError(Session session, Throwable error) {
          logger.debug("用户id为：{}的连接发送错误", this.userId);
          error.printStackTrace();
      }
   
      /**
       * 消息点对点推送
       *
       * @param clientId
       * @param message
       */
      public static void sendMessageToUser(String clientId, String message) {
   
          DemoWebsocket session = clients.get(clientId);
          if (session != null) {
              if (session.session.isOpen()) {
                 // session.session.getAsyncRemote().sendText("收到 " + clientId + " 的消息:" + message);
              	session.session.getAsyncRemote().sendText("收到 " + clientId + " 的消息:" + message);
              } else {
                  logger.info("用户session关闭");
              }
          } else {
              logger.info("用户session不存在");
          }
      }
   
      private static boolean isEmpty(String s) {
          return s == null || s.length() == 0 || "".equals(s)
                  || "null".equalsIgnoreCase(s)
                  || "undefined".equalsIgnoreCase(s);
      }
   
  }
  

   

• 前端代码： 根据项目业务 将A信息 发送给 B、C等信息

• <script type="text/javascript">
  var accId="${accid}";	
  var eventdate1='${eventDate}';
  var Ip;
  var timestamp = (new Date()).getTime();
  //区别 每个发送者 id 
  
  var userId = accId+'accId_'+timestamp;
  var recoveryczMsg =0;
  var operationendMsg=0;
  var ctx ="${ctx}";
  
  if('WebSocket' in window){
  	//alert("userId="+userId);
  	 var socketUrl ="ws://localhost:8080/emergency/websocketTest/"+userId;
   // var socketUrl = "ws://"+ window.location.host+ctx+"/websocketTest/" + userId;//访问SocketServer,并传输当前id
  	//alert("socketUrl="+socketUrl); 
       console.log("socketUrl="+socketUrl);
  	 websocket = new WebSocket(socketUrl);
  	 
  	console.log("link success")
  }else{
      alert('Not support websocket')
  }
  
  //连接发生错误的回调方法
  websocket.onerror = function(){
      //setMessageInnerHTML("error");
     // alert("error");
      alert("websocket连接发生错误,请修改地址");
  };
  
  //连接成功建立的回调方法
  websocket.onopen = function(event){
      //setMessageInnerHTML("open");
      
  	//alert("open");
  }
  console.log("-----")
  //接收到消息的回调方法
  websocket.onmessage = function(event){
       //setMessageInnerHTML(event.data);
       
       //alert(event.data);
       var messa = event.data;
  	if(messa.indexOf("recoverycz") != -1 ){ //3
  		 
  		 recoveryczMsg =1;
  		 $(".recovery-operation").trigger("click");//恢复运营
  		
  	 }else if(messa.indexOf("operationend") != -1){ //5
  		 operationendMsg=1;
         $(".disposal-end").trigger("click");//处置结束
         
  	 }
       
  }
  
  //连接关闭的回调方法
  websocket.onclose = function(){
     // setMessageInnerHTML("close");
     // alert("close");
  }
  
  //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  window.onbeforeunload = function(){
  
      websocket.close();
  }
  
  //将消息显示在网页上
  function setMessageInnerHTML(innerHTML){
      document.getElementById('message').innerHTML += innerHTML + '<br/>';
  }
  
  //关闭连接
  function closeWebSocket(){
  	//alert("关闭链接");
      websocket.close();
  }
  
  //发送消息
  function send(message){
      //var message = document.getElementById('text').value;
      message =message+"_"+userId;// userId = accId+'accId'+timestamp;
      websocket.send(message);
  }

• 写完后测试：

• websocket = new WebSocket("ws://172.28.14.122:7001/emergency/websocketTest/122_accId_122");
• 172.28.14.122:7001是我本地项目；emergency项目名称：
• 测试：

• Tomcat下和maven项目下出现404的原因：

• 如题所示，tomcat8启动正常，访问页面也正常，当页面上的websocket连接tomcat部署的websocket服务器时，出现404错误
• 
• 出现404的原因：有可能是：
• 出现这个问题，不是websocket服务器地址的问题，也不是tomcat7与tomcat8版本的问题。而是我们引入的依赖javax.websocket-api-1.1.jar和tomcat lib目录下自带的websocket-api.jar冲突了。（去掉maven的websocket-api-1.1.jar ）
• 第一步 （去掉maven的websocket-api-1.1.jar ）

第二步：引用tomcat自带 websocket 便可

• 
• 总结：
• webSocket的应用；webSocket的测试，以及解决报404 的原因

 

---

前言

代

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。