This is the first day of my participation in the August Challenge. For details, see:August is more challenging

# introduction

I have been blogging with Hugo for the last month. The experience is very good, with quick response and few bugs. Yesterday Hugo source also down, ready to study, after the estimate of heavy use of it.

# found

When you modify a blog on the server, you are surprised to find that the browser automatically refreshes the blog page, and it does not reload the entire page, that is, it refreshes while keeping the page in the current reading position.

# doubts

If you change it on the server, the page will refresh. How does that work? Is the browser always connected to the server? No, the blog page TAB has been pushed to the corner of the browser, if every page of the browser is connected to the server, this is too expensive! However, if the server changes after a long time, the blog page in the browser can also automatically refresh, how can this be achieved?

# to discuss

I shared this question with my colleague this morning, and the result was rejected. What my colleague means is that the browser can also determine whether the page needs to be updated by constantly sending requests to the server, or using WebSocket. It is unlikely that all my pages will stay connected, otherwise there would be no need for HTTP persistent connections or Websocket. I guess so.

# for

Came home from work wondering what was going on.

Look at the source code of the web page to see what js (in the mind is really a bit suspicious of js script timing requests). Jquery.min. js, generic library, skipped; Pull to the end, also did not see a few JS. Global search js. Wait, what is this , livereload.js Click on it to see what it says

!function(){return function e(t,o,n){function r(s,c){if(! o[s]){if(! t[s]){var a="function"= =typeof require&&require;if(! c&&a)return a(s,!0);if(i)return i(s,!0);var l=new Error("Cannot find module '"+s+"'");throw l.code="MODULE_NOT_FOUND",l}var h=o[s]={exports: {}}; t[s][0].call(h.exports,function(e){return r(t[s][1][e]||e)},h,h.exports,e,t,o,n)}return o[s].exports}for(var i="function"= =typeof require&&require,s=0; s<n.length; s++)r(n[s]);return r}}()({1: [function(e,t,o){t.exports=function(e){if("function"! =typeof e)throw TypeError(e+" is not a function!");return e}},{}],2: [function(e,t,o){var n=e("./_wks") ("unscopables"),r=Array.prototype;null==r[n]&&e("./_hide")(r,n,{}),t.exports=function(e){r[n][e]=!0}}, {"./_hide":17."./_wks":45}].3:...Copy the code

You know what? Just find out what it does.

# Come to the surface

The first thing I saw in my search was:

Livereload is a Web development aid that automatically refreshes the browser when we make changes to HTML, CSS, and JS, no need for F5. This in the double screen cut diagram, writing JS code when will improve a lot of efficiency;

That’s the answer I was looking for!

# In depth

What is livereload?

  • Livereload is a WebSocket implementation based on HTML5;
  • Livereload inserts a socket code (written in JS) into the web page that is visited, which links to the Livereload server socket. And wait to execute something like “Reload CSS /styles.css”.

How do I insert socket code into a socket? Here are three ways to insert the necessary socket code into a Web page:

  • Through the browser plug-in
  • Through the server middleware (the server middleware inserts a JS script into the returned page)
  • Manually in the page<script src=""></script>The introduction of

What is a livereload. Js?

  • A js library
  • A client that implements the Livereload protocol
  • It gets the change notification from the Livereload server and refreshes the page

Function summary

  • The REAL-TIME CSS was reloaded
  • The whole page is reloaded
  • Use the WebSocket protocol
  • CSS @importsupport
  • Real-time image reload
  • Real-time LESS. Js is reloaded

# The evidence is overwhelming

The server looks at the current connection to the Web server and does see that a client has been connected to the server

[centli @ VM_0_14_centos post] $netstat - natp | grep 8088 tcp6 0 0: : : 8088: : : * LISTEN - tcp6 0 0 172.16.0.14:8088 180.114.236.97: ESTABLISHED - 55897Copy the code

PC client view, there is indeed a connection with the server to maintain

C: \ Users \ Li_Yo > netstat ano | 8088 TCP 192.168.2.195 findstr searches: 55897 211.159.189.50:8088 ESTABLISHED 3820Copy the code

Moreover, this connection has not been disconnected since I opened the browser to visit the blog, and has remained connected for at least two hours.

This proves that there is indeed a TCP connection (WebSocket technology) between the browser and the client.