AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

解决浏览器不兼容websocket

2017-02-07 959
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本例使用tomcat 7.0的websocket做为例子。 1.新建web project。2.找到tomcat 7.0 lib 下的 catalina.jar,tomcat-coyote.jar添加到项目中.
本例使用tomcat 7.0的websocket做为例子。

1.新建web project。
2.找到tomcat 7.0 lib 下的 catalina.jar,tomcat-coyote.jar添加到项目中.
3.如下是我的目录结构
web.xml的配置.
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
  3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  5.     <display-name>Archetype Created Web Application</display-name>  
  6.     <servlet>  
  7.         <servlet-name>serverSocket</servlet-name>  
  8.         <servlet-class>com.sun.websocket.server.ServerSocket</servlet-class>  
  9.     </servlet>  
  10.     <servlet-mapping>  
  11.         <servlet-name>serverSocket</servlet-name>  
  12.         <url-pattern>/serverSocket</url-pattern>  
  13.     </servlet-mapping>  
  14.       
  15.       <welcome-file-list>  
  16.         <welcome-file>index.jsp</welcome-file>  
  17.       </welcome-file-list>  
  18. </web-app>  

ServerSocket.java的源码.
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. package com.sun.websocket.server;  
  2.   
  3. import java.io.IOException;  
  4.   
  5. import java.nio.ByteBuffer;  
  6. import java.nio.CharBuffer;  
  7. import java.util.ArrayList;  
  8. import java.util.HashMap;  
  9. import java.util.List;  
  10. import java.util.Map;  
  11. import java.util.UUID;  
  12. import java.util.concurrent.ConcurrentHashMap;  
  13.   
  14. import javax.servlet.http.HttpServletRequest;  
  15.   
  16. import org.apache.catalina.websocket.MessageInbound;  
  17. import org.apache.catalina.websocket.StreamInbound;  
  18. import org.apache.catalina.websocket.WebSocketServlet;  
  19. import org.apache.catalina.websocket.WsOutbound;  
  20.   
  21. public class ServerSocket extends WebSocketServlet {  
  22.   
  23.     private static final long serialVersionUID = -4853540828121130946L;  
  24.     private static Map< String , MyMessageInbound> mmiList = new ConcurrentHashMap< String , MyMessageInbound >();  
  25.     private String message_to ;   
  26.     private String message_me ;   
  27.       
  28.     @Override  
  29.     protected StreamInbound createWebSocketInbound(String arg0, HttpServletRequest request) {  
  30.         message_me = request.getParameter( "message_me" );  
  31.         message_to = request.getParameter( "message_to" );  
  32.         return new MyMessageInbound();  
  33.     }  
  34.       
  35.     private class MyMessageInbound extends MessageInbound  {  
  36.         WsOutbound myoutbound;  
  37.         private String me = message_me ;   
  38.         private String to = message_to ;   
  39.   
  40.         @Override  
  41.         public void onOpen(WsOutbound outbound) {  
  42.             try {  
  43.                 System.out.println("Open " + me + " to " + to);  
  44.                 this.myoutbound = outbound;  
  45.                 mmiList.put( me , this );  
  46.                 outbound.writeTextMessage(CharBuffer.wrap("Hello!"));  
  47.             } catch (IOException e) {  
  48.                 e.printStackTrace();  
  49.             }  
  50.         }  
  51.   
  52.         @Override  
  53.         public void onTextMessage(CharBuffer cb) throws IOException {  
  54.             System.out.println("Accept Message : " + cb);  
  55.             for ( String mmib : mmiList.keySet() ) {  
  56.                 if ( !to.equals(mmib) )  
  57.                     continue;  
  58.                 try  
  59.                 {  
  60.                     CharBuffer buffer = CharBuffer.wrap(cb);  
  61.                     mmiList.get(mmib).myoutbound.writeTextMessage(buffer);  
  62.                     mmiList.get(mmib).myoutbound.flush();  
  63.                 }  
  64.                 catch (Exception e) {  
  65.                     continue;  
  66.                 }  
  67.                 break;  
  68.             }  
  69.         }  
  70.   
  71.         @Override  
  72.         public void onClose(int status) {  
  73.             if( status == 1002 || status == 1000)  
  74.             {  
  75.                 System.out.println("Close " + me + " to " + to);  
  76.                 mmiList.remove(this);  
  77.             }  
  78.         }  
  79.   
  80.         @Override  
  81.         public void onBinaryMessage(ByteBuffer bb) throws IOException {  
  82.         }  
  83.        
  84.     }  
  85. }  
接下来编写index.jsp
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>My JSP 'index.jsp' starting page</title>  
  13.     <meta http-equiv="pragma" content="no-cache">  
  14.     <meta http-equiv="cache-control" content="no-cache">  
  15.     <meta http-equiv="expires" content="0">      
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  17.     <meta http-equiv="description" content="This is my page">  
  18.       
  19.     <script type="text/javascript" src="scripts/swfobject.js"></script>  
  20.     <script type="text/javascript" src="scripts/jquery.js"></script>  
  21.     <script type="text/javascript" src="scripts/web_socket.js"></script>  
  22.     <script type="text/javascript" src="scripts/jquery.WebSocket.js"></script>  
  23.     <%  
  24.         String message_to = request.getParameter( "message_to" );  
  25.         String message_me = request.getParameter( "message_me" );  
  26.         request.setAttribute( "message_to" , message_to );  
  27.         request.setAttribute( "message_me" , message_me );  
  28.     %>  
  29. <script>  
  30.     $(function ()  
  31.     {  
  32.         window.onbeforeunload = onbeforeunload_handler;   
  33.         window.onunload = onunload_handler;   
  34.         function onbeforeunload_handler(){   
  35.             //ws.close();  
  36.             return warning;   
  37.         }  
  38.         function onunload_handler()  
  39.         {  
  40.             //alert(1);  
  41.             ws = null;  
  42.         }  
  43.     });  
  44.     var message_to = "${message_to}";  
  45.     var message_me = "${message_me}";  
  46.     //var ws = new WebSocket("ws://192.168.202.56:8080/websocket_msg/serverSocket?message_to="+message_to+"&message_me="+message_me);  
  47.     var url = "websocket_msg/serverSocket?message_to="+message_to+"&message_me="+message_me;  
  48.     var ws = new $.websocket({  
  49.         protocol : "websocket_msg/serverSocket?message_to="+message_to+"&message_me="+message_me,  
  50.         domain : "192.168.1.120",  
  51.         port : "8080",  
  52.         onOpen:function(event){    
  53.             showMessage("已成功登录");    
  54.         },    
  55.         onError:function(event){  
  56.              alert("error:"+ event)  
  57.         },    
  58.         onMessage:function(result){    
  59.             receiveMessage(result);  
  60.         },  
  61.         onClose:function(event){  
  62.             ws = null;  
  63.         }  
  64.     });  
  65.       
  66.     function send(){  
  67.         if(!ws){  
  68.             alert("已经断开聊天室");  
  69.             return;  
  70.         }  
  71.          var msg=$.trim($("#msg").val());  
  72.          if(msg==""){return;}  
  73.          ws.send(msg);  
  74.          $("#messageInput").val("").focus();;  
  75.     }  
  76.       
  77.     function receiveMessage(result){  
  78.         showMessage(result);  
  79.     }  
  80.    
  81.     function showMessage(msg){  
  82.         document.getElementById("chatlog").textContent += msg + "\n";  
  83.     }  
  84. </script>  
  85.   </head>  
  86.     
  87.   <body>  
  88.     <body>  
  89.         <textarea id="chatlog" readonly style="width:500px;height:500px;"></textarea><br/>  
  90.         <input id="msg" type="text" />  
  91.         <button type="submit" id="sendButton" onClick="send()">Send!</button>  
  92.         <button type="submit" id="sendButton" onClick="closeConnect()">End</button>  
  93.     </body>  
  94.   </body>  
  95. </html>  

编写完成后，访问index.jsp时需要URL给出两个参数。一个代表发送者，一个代表接收者。
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. 例如 ?message_to=1&message_me=2"  
备注：具体需要的文件请到我的网盘下载:http://pan.baidu.com/s/1eQ1nbt4
文章标签：
Java
JavaScript
前端开发
应用服务中间件
数据格式
XML
关键词：
浏览器websocket
WebSocket浏览器
浏览器不兼容
浏览器不兼容WebSocket
double2li
目录
相关文章
我也要当昏君
|
7月前
|
XML 存储 网络协议
tcp支持浏览器websocket协议
tcp支持浏览器websocket协议
我也要当昏君
49 0
何雨晨
|
2月前
|
监控 前端开发 JavaScript
浏览器节能机制导致Websocket断连的坑
浏览器节能机制导致Websocket断连的坑
何雨晨
56 0
艾尼麻麻
|
6月前
|
监控 前端开发 JavaScript
记录浏览器节能机制导致Websocket断连问题
近期，在使用WebSocket（WS）连接时遇到了频繁断连的问题，这种情况在单个用户上每天发生数百次。尽管利用了socket.io的自动重连机制能够在断连后迅速恢复连接，但这并不保证每一次重连都能成功接收WS消息。因此，我们进行了一些的排查和测试工作。
艾尼麻麻
509 1
记录浏览器节能机制导致Websocket断连问题
&amp;ACE&amp;
|
7月前
|
前端开发 JavaScript API
如何让 Websocket兼容低版本浏览器
如何让 Websocket兼容低版本浏览器
&amp;ACE&amp;
279 2
auqbllxiu
|
JavaScript 前端开发 CDN
CDN引入vue不兼容IE浏览器
CDN引入vue不兼容IE浏览器
auqbllxiu
130 0
肥波的日常bug
|
前端开发 JavaScript Java
websocket部署后在谷歌内核浏览器异常断开问题
后端springboot前端vue开发的网页，利用websocket实现操作数据库前端网页实时刷新的功能
肥波的日常bug
701 1
websocket部署后在谷歌内核浏览器异常断开问题
码农技术君
|
JavaScript 前端开发 CDN
CDN引入vue不兼容IE浏览器
CDN引入vue不兼容IE浏览器
码农技术君
120 0
yanbigfeg
|
Web App开发 移动开发
webSocket浏览器握手不成功（解决）
websocket与服务端握手会报握手不成功的错误解决方法： 首先是服务端首次收到请求要回报给客户端的报文要做处理多的不说，方法敬上： 1 /// 2 /// 打包请求连接数据 3 /// 4 /// 5 ...
yanbigfeg
1599 0
秋天风景
|
Web App开发 JavaScript 前端开发
Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用
　　 Socket.IO 是一个功能非常强大的框架，能够帮助你构建基于 WebSocket 的跨浏览器的实时应用。支持主流浏览器，多种平台，多种传输模式，还可以集合 Exppress 框架构建各种功能复杂的实时应用。
秋天风景
1029 0
技能实验室
|
1月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式：`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求，返回Promise对象，可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果，适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
技能实验室
52 5
在浏览器执行js脚本的两种方式