zoukankan      html  css  js  c++  java
  • Websocket 协议的基本使用与示例

    WEBSOCKET协议

    WebSocket概念

    • 在WebSocket概念出来之前,如果页面要不停地显示最新的价格,那么必须不停地刷新页面,或者用一段js代码每隔几秒钟发消息询问服务器数据。
    • 而使用WebSocket技术之后,当服务器有了新的数据,会主动通知浏览器。

    优点

    • 节约带宽。 不停地轮询服务端数据这种方式,使用的是http协议,head信息很大,有效数据占比低, 而使用WebSocket方式,头信息很小,有效数据占比高。

    • 无浪费。 轮询方式有可能轮询10次,才碰到服务端数据更新,那么前9次都白轮询了,因为没有拿到变化的数据。 而WebSocket是由服务器主动回发,来的都是新数据。

    • 实时性,考虑到服务器压力,使用轮询方式不可能很短的时间间隔,否则服务器压力太多,所以轮询时间间隔都比较长,好几秒,设置十几秒。 而WebSocket是由服务器主动推送过来,实时性是最高的

    JAVA开发WEBSOCKET应用开发流程

    Tomcat版本

    旧版本的Tomcat 不能支持WebSocket, 至少需要 7.0.47 以上才可以,

    创建动态Web项目

    为了支持WebSocket,需要引入javaee.jar

    BitCoinServer

    创建BitCoinServer类,用注解@ServerEndpoint("/ws/bitcoinServer")把它标记为一个WebSocket Server
    ws/bitcoinServer 表示有通过这个地址访问该服务

    OnOpen 表示有浏览器链接过来的时候被调用
    OnClose 表示浏览器发出关闭请求的时候被调用
    OnMessage 表示浏览器发消息的时候被调用
    OnError 表示有错误发生,比如网络断开了等等

    sendMessage 用于向浏览器回发消息

    其中OnOpen发生的时候,即有链接过来的时候,会把当前WebSocket Server丢在ServerManager里管理起来,这样Tomcat才知道总共有哪些Server, 方便以后进行群发

    package com.how2java.bitcoin;
     
    import java.io.IOException;
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;
     
    /**
     * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
     * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
     */
    @ServerEndpoint("/ws/bitcoinServer")
    public class BitCoinServer {
         
        //与某个客户端的连接会话,需要通过它来给客户端发送数据
        private Session session;
     
        @OnOpen
        public void onOpen(Session session){
            this.session = session;
            ServerManager.add(this);    
        }
         
        public void sendMessage(String message) throws IOException{
            this.session.getBasicRemote().sendText(message);
        }
     
        @OnClose
        public void onClose(){
            ServerManager.remove(this); 
        }
     
        @OnMessage
        public void onMessage(String message, Session session) {
            System.out.println("来自客户端的消息:" + message);
        }
     
        @OnError
        public void onError(Session session, Throwable error){
            System.out.println("发生错误");
            error.printStackTrace();
        }
     
    }
    

    ServerManager

    ServerManager 中维护了一个线程安全的集合servers, 用于因为浏览器发起连接请求而创建的BitCoinServer.

    broadCast 方法遍历这个集合,让每个Server向浏览器发消息。

    package com.how2java.bitcoin;
    
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.Collection;
    import java.util.Collections;
    
    public class ServerManager {
    
    	private static Collection<BitCoinServer> servers = Collections.synchronizedCollection(new ArrayList<BitCoinServer>());
    	
    	public static void broadCast(String msg){
    		for (BitCoinServer bitCoinServer : servers) {
    			try {
    				bitCoinServer.sendMessage(msg);
    			} catch (IOException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    		}
    	}
    	
    	public static int getTotal(){
    		return servers.size();
    	}
    	public static void add(BitCoinServer server){
    		System.out.println("有新连接加入! 当前总连接数是:"+ servers.size());
    		servers.add(server);
    	}
    	public static void remove(BitCoinServer server){
    		System.out.println("有连接退出! 当前总连接数是:"+ servers.size());
    		servers.remove(server);
    	}
    	
    }
    

    BitCoinDataCenter

    创建BitCoinDataCenter,使其继承HttpServlet.
    标记为Servlet不是为了其被访问,而是为了便于伴随Tomcat一起启动,因为可以通过loadOnStartup一起就启动了
    这个类实现了Runnable,可以在初始化方法里创建一个线程并调用之。
    run 方法: 每个1-3秒就创建一个新价格,然后根据当前有多少人链接过来,进行调整价格,接着通过ServerManager广播出去。 这样浏览器就看到如如图所示的效果了

    index.jsp

    <%@ page language="java" pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title>用WebSocket实时获知比特币价格</title>
    </head>
    <body>
         
            <div style="400px;margin:20px auto;border:1px solid lightgray;padding:20px;text-align:center;">
                当前比特币价格:¥<span style="color:#FF7519" id="price">10000</span>
                <div style="font-size:0.9em;margin-top:20px">查看的人数越多,价格越高, 当前总共 <span id="total">1</span> 个人在线</div>           
                <div style="color:silver;font-size:0.8em;margin-top:20px">以上价格纯属虚构,如有雷同,so what?</div>
     
            </div>
         
    </body>
     
    <script type="text/javascript">
        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://localhost:8080/bitcoin/ws/bitcoinServer");
     
            //连接成功建立的回调方法
            websocket.onopen = function () {
                websocket.send("客户端链接成功");
            }
     
            //接收到消息的回调方法
            websocket.onmessage = function (event) {
                setMessageInnerHTML(event.data);
            }
             
            //连接发生错误的回调方法
            websocket.onerror = function () {
                alert("WebSocket连接发生错误");
            };
     
           //连接关闭的回调方法
            websocket.onclose = function () {
                alert("WebSocket连接关闭");
            }
     
            //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
            window.onbeforeunload = function () {
                closeWebSocket();
            }
             
        }
        else {
            alert('当前浏览器 Not support websocket')
        }
     
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            var bitcoin = eval("("+innerHTML+")");
            document.getElementById('price').innerHTML = bitcoin.price;
            document.getElementById('total').innerHTML = bitcoin.total;
        }
     
        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }
         
    </script>
    </html>
    

    STRUTS 注意事项

    因为Struts会把所有的请求都拦截下来,所以需要加一个例外

    <constant name="struts.action.excludePattern" value="/ws/bitcoinServer" /> 
    

    NGINX 注意事项

    nginx.conf

    如果做了nginx和tomcat整合的话,那么nginx 需要加上这么一段话,才能够正常的把webSocket请求交给tomcat,不然tomcat也不知道怎么处理

    location /ws/ {
            proxy_pass http://127.0.0.1:11180;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
    }
    
  • 相关阅读:
    MySQL语法
    SQL必知必会
    大话设计模式
    软件工程
    myeclipse中git的使用
    提取文件中图片标签
    pandas 分析各地区男女的分布情况
    提取图片标签
    Requwsts+正则表达式爬取猫眼电影Top100
    PyCharm激活码
  • 原文地址:https://www.cnblogs.com/mumuyinxin/p/12699428.html
Copyright © 2011-2022 走看看