WebSocket学习总结

WebSocket学习总结

1、概念

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

2、优点

  1. 节约带宽。 不停地轮询服务端数据这种方式,使用的是http协议,head信息很大,有效数据占比低, 而使用WebSocket方式,头信息很小,有效数据占比高。
  2. 无浪费。 轮询方式有可能轮询10次,才碰到服务端数据更新,那么前9次都白轮询了,因为没有拿到变化的数据。 而WebSocket是由服务器主动回发,来的都是新数据。
  3. 实时性,考虑到服务器压力,使用轮询方式不可能很短的时间间隔,否则服务器压力太多,所以轮询时间间隔都比较长,好几秒,设置十几秒。 而WebSocket是由服务器主动推送过来,实时性是最高的

3、开发

备注:旧版本的Tomcat 不能支持WebSocket, 至少需要 7.0.47 以上才可以。
先看效果:
效果图
3.1、首先创建项目,这里我用Myeclipse。
create
并且导入依赖包。
build

3.2、编码
ServerManage.java

package websocket;

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) {
            
                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);
    }

}

BitCoinServer.java

package websocket;

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("/ws/bitcoinsocket")
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();
    }
}

BitCoinDataCenter.java

package websocket;

import java.util.Random;

import javax.servlet.ServletConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;

@WebServlet(name="BitCoinDataCenter",urlPatterns = "/BitCoinDataCenter",loadOnStartup=1) //标记为Servlet不是为了其被访问,而是为了便于伴随Tomcat一起启动
public class BitCoinDataCenter extends HttpServlet implements Runnable{
    public void init(ServletConfig config){
        startup();
    }
     
    public  void startup(){
        new Thread(this).start();
    }
    @Override
    public void run() {
        int bitPrice = 100000;
        while(true){
             
            //每隔1-3秒就产生一个新价格
            int duration = 1000+new Random().nextInt(2000);
            try {
                Thread.sleep(duration);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            //新价格围绕100000左右50%波动
            float random = 1+(float) (Math.random()-0.5);
            int newPrice = (int) (bitPrice*random);
             
            //查看的人越多,价格越高
            int total = ServerManager.getTotal();
            newPrice = newPrice*total;
             
            String messageFormat = "{\"price\":\"%d\",\"total\":%d}";
            String message = String.format(messageFormat, newPrice,total);
            //广播出去
            ServerManager.broadCast(message);
        }
    }
}

jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>用WebSocket实时获知比特币价格</title>
</head>
<body>
     
        <div style="width: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>

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Copyright bcfou.com.Some Rights Reserved.