yinwq
追逐丿
采纳率50%
2016-01-11 02:04

webSocket客户端报302,不知道哪里写错了。

请看下面代码:

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8" content="text/html">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>基于Java服务端消息主动推送技术</title>
  <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    body{
        background:url("image/bg.jpg") no-repeat;
        background-size:cover;
    }
    .chatbox{
        width:700px;
        height:500px;
        margin:100px auto;
        font-size:12px;
        font-family:"微软雅黑";
        color:#666;
    }
    h1{
        text-align:center;
        font-size:30px;
        color:green;
        text-shadow:5px 10px 10px #111;
    }
    .chatbox .c_info{
        text-align:left;
        line-height:46px;
    }
    .inputText{
        height:30px;
        border:0;
        outline:none;
        text-indent:1em;
        font-size:14px;
        font-family:"微软雅黑";
        color:#61B52D;
        border: 1px solid #61B52D;
    }
    .btn{
        width:80px;
        text-indent:0;
        background:#9AD02D;
        color:#fff;
        margin-left: 10px;
    }

    .chatbox .c_message{
        width:97%;
        height:300px;
        overflow:auto;
        border:1px solid yellow;
        font-size:24px;
        color:#9DA791;
        padding-left:20px;
        box-shadow:2px 10px 10px #111;
        /* background: #EAF9BE; */
    }

    .chatbox .c_send{
        margin-top: 10px;
    }
  </style>
 </head>
 <body>
    <div class="chatbox">
        <h1>基于Java服务端消息主动推送技术</h1>
        <div class="c_info">
            服务器地址:<input type="text" value="localhost:8080/webSocket" id="addr" class="inputText" style="width:350px"/>
            用户名:<input type="text" value="Yinwq" id="userName" class="inputText"/>
            <input type="button" id="con" class="inputText btn" value="连接" />
        </div>
        <div class="c_message">

        </div>
        <div class="c_send">
            <input type="text" id="sendText" class="inputText" style="width:592px" />
            <input type="button" id="sendBtn" class="inputText btn" value="发送" />
        </div>
    </div>
 </body>
 <!-- 引入jquery类库 -->
 <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
 <script type="text/javascript">
    var connected = false;
    var ws;
    $(function(){
        $(".c_send").hide();
        //1.判断浏览器是否支持webSocket
        if(window.WebSocket || window.MozWebSocket){
            printMsg("您的浏览器支持WebSocket,您可以尝试连接到聊天服务器!" , "OK");
        }else{
            printMsg("您的浏览器不支持WebSocket,您可以换其他浏览器!" , "ERROR");
            $("#con").attr("disabled","true");
        }
    })

    //打印信息
    function printMsg(msg,msgType){
        if(msgType == "OK"){
            msg = "<span style='color:green'>"+msg+"</span>";
        }
        if(msgType == "ERROR"){
            msg = "<span style='color:red'>"+msg+"</span>"
        }
        $(".c_message").append(msg + "<br/>");
    }

    //点击连接的时候触发事件
    $("#con").click(function(){
        if(connected){
            //已连接
            ws.send("["+$("#userName").val()+"]离开了聊天室");
            connected = false;
            ws.close();
        }else{//没有连接
            printMsg("正在准备连接,请稍等!", "");
            var url = "ws://"+ $("#addr").val();
            if("WebSocket" in window){
                //ws = new WebSocket(url);
                ws = new WebSocket('ws://localhost:8080/webSocket');
            }else if ("MozWebSocket" in window) {
                ws = new MozWebSocket(url);
            }

            //连接成功后设置连接状态
            connected = true;
            $("#con").val("断开");

            //注册事件
            ws.onopen = function(event){
                openWs(event);
            };
            ws.onmessage = function(event){
                msgWs(event);
            };
            ws.onclose = function(event){
                closeWs(event);
            };
            ws.onerror = function(event){
                errorWs(event);
            };

        }

    });

    //打开socket
    function openWs(event){
        printMsg("连接已建立...!", "OK"); //建立连接的时候
        ws.send("["+$("#userName")+"]进入了聊天室");
        $(".c_send").show();
    };

    //接收消息
    function msgWs(event){
        printMsg(evnet.data);
    };
    //关闭连接
    function closeWs(event){
        $("#con").val("连接");
        //隐藏发送div
        $(".c_send").hide();
    };
    //产生错误
    function errorWs(event){
        printMsg("与服务器连接错误.." , "ERROR");
    };
    //点击发送触发事件
    $("#sendBtn").click(function(){
        //获取发送内容
        var text = $("#sendText").val();
        ws.send($("#userName").val() + "说:" + text);
        $("#sendText").val("");//清空发送框
    });
 </script>
</html>

浏览器报错
图片说明

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • qq_45412136 qq_45412136 1年前

    兄弟,解决了嘛?其实从网上复制的说的好像都不对,要加项目名的说,我透。。。

    点赞 评论 复制链接分享
  • arthurlee arthurlee 5年前

    那要看server是什么了。看报错是server和client协议不匹配造成的。不过,没有完整的代码和环境,没有办法判断。

    点赞 评论 复制链接分享

相关推荐