简单搭建webSocket

其他博主连接：http://www.cnblogs.com/xdp-gacl/p/5193279.html

websocket  顾名思义 就是 web + socket 进行通信

《网上摘抄》

一.WebSocket简单介绍

　　随着互联网的发展，传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来，随着HTML5的诞生，WebSocket协议被提出，它实现了浏览器与服务器的全双工通信，扩展了浏览器与服务端的通信功能，使服务端也能主动向客户端发送数据。

　　我们知道，传统的HTTP协议是无状态的，每次请求（request）都要由客户端（如 浏览器）主动发起，服务端进行处理后返回response结果，而服务端很难主动向客户端发送数据；这种客户端是主动方，服务端是被动方的传统Web模式 对于信息变化不频繁的Web应用来说造成的麻烦较小，而对于涉及实时信息的Web应用却带来了很大的不便，如带有即时通信、实时数据、订阅推送等功能的应 用。在WebSocket规范提出之前，开发人员若要实现这些实时性较强的功能，经常会使用折衷的解决方法：轮询（polling）和Comet技术。其实后者本质上也是一种轮询，只不过有所改进。

　　轮询是最原始的实现实时Web应用的解决方案。轮询技术要求客户端以设定的时间间隔周期性地向服务端发送请求，频繁地查询是否有新的数据改动。明显地，这种方法会导致过多不必要的请求，浪费流量和服务器资源。

　　Comet技术又可以分为长轮询和流技术。长轮询改进了上述的轮询技术，减小了无用的请求。它会为某些数据设定过期时间，当数据过期后才会向服务端发送请求；这种机制适合数据的改动不是特别频繁的情况。流技术通常是指客户端使用一个隐藏的窗口与服务端建立一个HTTP长连接，服务端会不断更新连接状态以保持HTTP长连接存活；这样的话，服务端就可以通过这条长连接主动将数据发送给客户端；流技术在大并发环境下，可能会考验到服务端的性能。

　　这两种技术都是基于请求-应答模式，都不算是真正意义上的实时技术；它们的每一次请求、应答，都浪费了一定流量在相同的头部信息上，并且开发复杂度也较大。

　　伴随着HTML5推出的WebSocket，真正实现了Web的实时通信，使B/S模式具备了C/S模式的实时通信能力。WebSocket的工作流程是这 样的：浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小 了很多。本文不详细地介绍WebSocket规范，主要介绍下WebSocket在Java Web中的实现。

　　JavaEE 7中出了JSR-356:Java API for WebSocket规范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。Tomcat从7.0.27开始支持 WebSocket，从7.0.47开始支持JSR-356，下面的Demo代码也是需要部署在Tomcat7.0.47以上的版本才能运行。

本人示例：

1.  创建maven项目 （web 项目）

            加入pom依赖

<dependencies>
    <!-- https://mvnrepository.com/artifact/javax/javaee-api -->
    <dependency>
        <groupId>javax</groupId>
        <artifactId>javaee-api</artifactId>
        <version>7.0</version>
        <scope>provided</scope>
    </dependency>
</dependencies>

                

2. 创建html   前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title  Java后端WebSocket的Tomcat实现</title>
</head>
<body>
Welcome<br/><input id="text" type="text"/>
     <button οnclick="send()">发送消息</button>
     <hr/>
     <button οnclick="closeWebSocket()">关闭WebSocket连接</button>
     <hr/>
     <div id="message"></div>

</body>

<script type="text/javascript">
    var websocket = null;
    // 判断当前浏览器是否支持websocket
    if('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8089/myWebSocket/websocket");
    }else {
        alert("not error  不支持websocket")
    }
    // 连接错误是发生的回调方法
    websocket.onerror = function () {
        alert("websocket.onerror")
    }
    // 连接成功时的回调方法
    websocket.onopen = function () {
        alert("websocket.onopen ")
    }
    //接收到消息的回调函数
    websocket.onmessage = function () {
        alert("websocket.onmessage")
    }
    // 连接关闭时的回调函数
    websocket.onclose = function () {
        alert("websocket.onclose")
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
            }
            function closeWebSocket() {
                websocket.close();
            }
            function send() {
                var message = document.getElementById('text').value;
                        websocket.send(message);
                     }
</script>
</html>

3.更改web.xml  添加 welcome页面  

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

4. 编写java代码

package com.xiaodu.websocket;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.server.ServerEndpoint;

 */
    /**
   * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
   * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
   */
@ServerEndpoint("/websocket")
public class MywebSocket {

        /**
         * 连接成功后调用方法
         */
        @OnOpen
        public void  onOpen() {
            System.out.println("连接成功   --- onopen");
        }

        /**
         * 连接关闭调用方法
         */

        @OnClose
        public void onClose() {
            System.out.println("连接关闭   --- onclose");
        }

        /**
         * 连接异常
         */
        @OnError
        public void onError(Throwable error) {
            System.out.println("连接异常  ---onError");
            error.printStackTrace();
        }

        /**
         * 接收到客户短消息
         */
        @OnMessage
        public void onMessage(String mess) {
            System.out.println("接收到客户端消息  --onMessage  =" + mess);
        }


    }

5.基本完成，可以测试  如果遇到问题了可以试试 在web.xml中把你写的类配置到《sevlet》中 或者你使用的是eclipse的时候， 本人使用的是IDEA；