My blog all moved to personal blog,Pure love blog:www.ityw.club, all subsequent blogs will be updated on qiqing blog.

A meet,

One day found that a website can detect IP function, can detect IP is high hidden, delay, region, just not long ago to do the project can extract IP, just can use this interface to improve the quality of our use of IP, how to do?

Open up our Fiddler disk!

Fd: Hard at work!

I: what? No data, no data fd is broken? Open your browser and debug a wave

Browser: Hard at work!

I: what? Still no data? Saw a ghost today?

Let me depressed for a long time, usually invincible FD method failure, originally thought that website random return of false data, so I read the source code, hey, hey, finally let me catch today our protagonist “webSocket”, The original website in the page directly with webSocket and server to establish a long connection, so we can not catch the package, protagonist find out the finale! No, no, no, no, no, no, no, no, no.

Second, the bosom friend

Then began crazy Baidu Google, finally discovered an easy to understand interesting article, also discovered a hairstyle has the actual combat big guy very much.

If you want to get to know webSocket, go in and exchange feelings with webSocket. The channel is as follows:

Interesting soul bosses: www.zhihu.com/question/20…

Combat big guy: www.cnblogs.com/xdp-gacl/p/…

Three, fall in love

Simple and webSocket under the exchange of feelings, found that webSocket is still quite charming, so I decided to continue it, after all, dripping of kindness must yongquan reciprocate.

Let’s start a small chat room with webSocket, to access our family code!

1. Project structure diagram

2. Introduce our JAR package in pom.xml

<dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>8.0</version>
    <scope>provided</scope>
</dependency>
Copy the code

3. Back-end code

/ * * *@ServerEndpointAn annotation is a class-level annotation that defines the current class as a WebSocket server. * The value of the annotation will be used to listen for the user's connection to the terminal access URL, which the client can use to connect to the WebSocket server */
@ServerEndpoint("/websocket")
public class WebSocket {
    // Static variable, used to record the current number of online connections. It should be designed to be thread-safe.
    private static int onlineCount = 0;

    // A thread-safe Set for a concurrent package, used to hold each client's corresponding MyWebSocket object. To enable the server to communicate with a single client, a Map can be used to store the Key as the user identity
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();

    // A connection session with a client through which to send data to the client
    private Session session;

    /** * The connection was successfully established to call the method *@paramSession Optional parameter. Session Is a connection session with a client through which data is sent to the client */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);     // add to set
        addOnlineCount();           // The number of lines increases by 1
        // Update the number of page online
        for(WebSocket item: webSocketSet){
            try {
                item.sendMessage(String.valueOf(getOnlineCount()));
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
        System.out.println("New connection added! The number of current online users is" + getOnlineCount());
    }

    /** * the connection closes the called method */
    @OnClose
    public void onClose(a){
        webSocketSet.remove(this);  // Delete from set
        subOnlineCount();           // The number of lines is reduced by 1
        // Update the number of page online
        for(WebSocket item: webSocketSet){
            try {
                item.sendMessage(String.valueOf(getOnlineCount()));
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
        System.out.println("There's a connection down! The number of current online users is" + getOnlineCount());
    }

    /** * The method called after receiving the client message *@paramMessage Indicates the message sent by the client@paramSession Optional parameter */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("Message from client :" + message);
        // Group message
        for(WebSocket item: webSocketSet){
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
                continue; }}}/** ** is called when an error occurs@param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error){
        System.out.println("Error occurred");
        error.printStackTrace();
    }

    /** * this method is different from the above methods. There are no annotations. You add methods as needed. *@param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException{
        this.session.getBasicRemote().sendText(message);
        //this.session.getAsyncRemote().sendText(message);
    }

    public static synchronized int getOnlineCount(a) {
        return onlineCount;
    }

    public static synchronized void addOnlineCount(a) {
        WebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount(a) { WebSocket.onlineCount--; }}Copy the code

4. Front-end code

<%@ page language="java" pageEncoding="UTF-8" %>
<! DOCTYPEhtml>
<html>
<head>
    <title>Pure love</title>
    <script src="static/base/jquery.min.js" charset="utf-8"></script>
    <link href="600 https://fonts.googleapis.com/css?family=Source+Sans+Pro:400," rel="stylesheet">
    <link rel="stylesheet" href="static/socket/css/reset.min.css">
    <link rel="stylesheet" href="static/socket/css/style.css">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <script type="text/javascript" src="static/layui/layui.all.js"></script>
    <script  src="static/socket/js/index.js"></script>
    <style type="text/css">
        .msg-text-color{
            color:#8097C2;
            margin-bottom:5px;
        }
        .msg-text-margin{
            margin-top: 13%;
        }
        .msg-text-me-margin{
            margin-top: 10%;
            margin-left:59%;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="container">
        <div class="left">
            <div class="top">
                <input type="text" placeholder="Search" />
                <a href="javascript:;" class="search"></a>
            </div>
            <ul class="people">
                <li class="person" data-chat="person6">
                    <img src="static/socket/img/drake.jpg" alt="" />
                    <span class="name">Drake</span>
                    <span class="time">2:09 PM</span>
                    <span class="preview">howdoyoudoaspace</span>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="top"><span>To: <span class="name" id="menNum">Dog Woofson</span></span></div>
            <div class="chat" data-chat="person2" id="message" style="height:78%; overflow:auto">
                <div class="conversation-start">
                    <span>Hi, pure feeling</span>
                </div>
            </div>

            <div class="write">
                <a href="javascript:;" class="write-link attach"></a>
                <input type="text" id="text"/>
                <a href="javascript:;" class="write-link smiley"></a>
                <a href="javascript:;" class="write-link send" onclick="send()"></a>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var websocket = null;
    var intervaler = null;
    // Check whether the current browser supports WebSocket
    if ('WebSocket' in window) {
        // You need to change the address of your project
        websocket = new WebSocket("ws://www.lingchang.club/websocket");
        getName();
        // Historical message
        var storage=window.localStorage;
        for(var i=0; i<storage.length; i++){var key=storage.key(i);
            var value=storage.getItem(key);
            if(value.indexOf("{") > -1) {var obj = JSON.parse(value);
                if(null! =key&&key.indexOf("bubble") > -1) {if(key.indexOf("You") > -1){
                        setMessageInnerHTML(obj,"bubble you");
                    }else{
                        setMessageInnerHTML(obj,"bubble me");
                    }
                }
            }
        }
        lastBomScrollBar();
    }
    else {
        alert('Current browser Not support websocket')}function creatData(name,time,msg) {
        var data=new Object(a); data.name=name; data.time=time; data.msg=msg;return data;
    }

    function lastBomScrollBar() {
        // The scroll bar is positioned at the bottom
        $('.chat').scrollTop($('.chat') [0].scrollHeight);
    }


    // Connection error callback method
    websocket.onerror = function () {
        console.log("WebSocket connection error");
    };

    // The callback method for successfully establishing the connection
    websocket.onopen = function (event) {
        console.log("WebSocket connection successful");
    }

    // The callback method that received the message
    websocket.onmessage = function (event) {
        if(event.data.indexOf("{") > -1) {var dt = JSON.parse(event.data);
        var storage=window.localStorage;
        var name=storage.getItem("ltName");
        if(""==name||null==name||name=="undfined") {return false;
        }
        // The name of the instant messenger is the same as the name of the sender. If the name of the instant messenger is the same as the name of the sender, it is recommended to use the name entered by the user and the time stamp
        if(name==dt.name){
        storage.setItem(dt.time +"-bubbleMe",event.data);
        setMessageInnerHTML(dt,"bubble me");
        }else{
        storage.setItem(dt.time +"-bubbleYou",event.data);
        setMessageInnerHTML(dt,"bubble you");
        var msg='[You have new information]'; showTips(msg); }}else{$("#menNum").html("Number of current online users:"+event.data+"People"); }}// A callback method to close the connection
    websocket.onclose = function () {
        console.log("WebSocket connection closed");
    }

    // Listen for window closing events, when the window is closed, actively close websocket connection, to prevent the connection is not closed, the server will throw exceptions.
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    // Get the sender's name
    function getName(){
        var storage=window.localStorage;
        var name=storage.getItem("ltName");
        if(""==name||null==name||name=="undfined") {/ / prompt layer
            layer.prompt({title: 'Enter a nickname and confirm'.formType: 2.offset: 'auto'}, function(pass, index){
                layer.close(index);
                if(null==pass||""==pass){
                    layer.msg('The nickname cannot be empty duck, re-enter it. ');
                    getName();
                    return false;
                }
                var storage=window.localStorage;
                storage.setItem("ltName",pass);
                name=pass;
            });
        }
        return name;
    }

    // Displays the message on the web page
    function setMessageInnerHTML(data,clas) {
        if(clas.indexOf("you") > -1) {var msg="<div class='msg-text-color msg-text-margin'> "+data.name+""+ format(data.time)+" </div> <div class='"+clas+"'> "+data.msg+" </div>";
            document.getElementById('message').innerHTML += msg + '<br/>';
            lastBomScrollBar();
        }else{
            var msg="<div class='msg-text-color msg-text-me-margin'> "+format(data.time)+""+ data.name+" </div> <div class='"+clas+"'> "+data.msg+" </div>";
            document.getElementById('message').innerHTML += msg + '<br/>'; lastBomScrollBar(); }}// Close the WebSocket connection
    function closeWebSocket() {
        websocket.close();
    }

    // Send a message
    function send() {
        var message = document.getElementById('text').value;
        var storage=window.localStorage;
        var name=storage.getItem("ltName");
        var data=creatData(name,(new Date()).getTime(),message);
        websocket.send(JSON.stringify(data));
        $("#text").val("");
    }
    // Press Enter to send
    document.onkeydown = function (e) {
        if(! e) e =window.event;
        if ((e.keyCode || e.which) == 13) { send(); }}function add0(m){return m<10?'0'+m:m }
    // The timestamp is converted to the time type
    function format(shijianchuo)
    {
        var time = new Date(shijianchuo);
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y+The '-'+add0(m)+The '-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
    }
    // Go to the page to close the message prompt
    document.addEventListener('visibilitychange'.function() {
        var isHidden = document.hidden;
        if(! isHidden) {clearInterval(intervaler);
            showTips("Pure love");
            intervaler = null; }});// There is a message browser TAB prompt
    function showTips(tip){
        intervaler = setInterval(function(){
            if(document.title === tip&&"Pure love"! =document.title){
                document.title = '[]';
            }else{
                document.title = tip; }},300);
    }

</script>
</html>
Copy the code

Fourth, slaughter

What? You still want to go to the theater? No, no, no, next is your stage. There will definitely be various problems in this project coding, please show them in the comments section if you have any problems, and you can also show them when you solve them, for the convenience of future generations, hahaha hahaha

Project source code address: gitee.com/liuyuzhijia…

Project online experience address: www.lingchang.club/webSocket.j…

This dome and theory comes mostly from the above two big guys, and I would like to thank them, I am a small yard farmer standing on the shoulders of giants.