### Vue.js Project Build and Development Setup

Source: https://github.com/jitwxs/blog-sample/blob/master/Vue/vue_axios/README.md

Provides standard npm commands for managing a Vue.js project lifecycle. This includes installing project dependencies, starting a development server with hot reload, building the application for production, and generating a bundle analyzer report.

```bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

--------------------------------

### JavaScript WebSocket Connection Setup and Event Handlers

Source: https://github.com/jitwxs/blog-sample/blob/master/springboot-sample/ws-sample/src/main/resources/static/index1.html

Initializes a WebSocket connection, handles browser compatibility, and sets up essential event listeners for connection open, message reception, connection close, and errors. It also includes global variable declarations and a window unload handler to gracefully close the WebSocket.

```JavaScript
var ws = null, wsUrl = "ws://localhost:8080/ws1";
var lockReconnect = false; //避免ws重复连接
createWebSocket(wsUrl); // 建立连接

function createWebSocket(url) {
    if ('WebSocket' in window) {
        ws = new WebSocket(url);
    } else if ('MozWebSocket' in window) {
        ws = new MozWebSocket(url);
    } else {
        alert('您的浏览器不支持WebSocket，请更换浏览器');
    }
    initEventHandle();
}

function initEventHandle() {
    ws.onopen = function(){
        console.log("客户端连接建立");
        //心跳检测重置
        heartCheck.reset().start();
    };
    ws.onmessage = function(event){
        console.log("客户端收到消息啦:" +event.data);
        //拿到任何消息都说明当前连接是正常的，重置心跳
        heartCheck.reset().start();
    };
    ws.onclose = function(){
        console.log("客户端连接关闭");
        // 重连WebSocket
        reconnect(wsUrl);
    };
    ws.onerror = function(){
        console.log("客户端连接错误");
        // 重连WebSocket
        reconnect(wsUrl);
    };
}

window.onbeforeunload = function(){
    ws.close();
};
```

--------------------------------

### Basic JavaScript WebSocket Client Implementation

Source: https://github.com/jitwxs/blog-sample/blob/master/springboot-sample/ws-sample/src/main/resources/static/index.html

This JavaScript code provides a complete client-side implementation for WebSocket communication. It establishes a connection to a specified WebSocket URL, defines handlers for various WebSocket events (onopen, onerror, onmessage, onclose), and includes utility functions to send messages and display received data on the webpage. Additionally, it ensures the WebSocket connection is gracefully closed when the browser window is unloaded to prevent server-side exceptions.

```JavaScript
var ws = null; 
// 建立连接
if ('WebSocket' in window) {
  ws = new WebSocket("ws://localhost:8080/ws");
} else if ('MozWebSocket' in window) {
  ws = new MozWebSocket("ws://localhost:8080/ws");
} else {
  alert('您的浏览器不支持WebSocket，请更换浏览器');
}

//连接发生错误的回调方法
webSocket.onerror = function(){
  setMessageInnerHTML("error");
};

//连接成功建立的回调方法
webSocket.onopen = function(){
  setMessageInnerHTML("open");
};

//接收到消息的回调方法
webSocket.onmessage = function(event){
  setMessageInnerHTML(event.data);
};

//连接关闭的回调方法
webSocket.onclose = function(){
  setMessageInnerHTML("close");
};

//监听窗口关闭事件，当窗口关闭时，主动去关闭webSocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
  ws.close();
};

//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
  document.getElementById('message').innerHTML = innerHTML + '<br/>';
}

//关闭连接
function closeWebSocket(){
  ws.close();
}

//发送消息
function send(){
  let message = document.getElementById('text').value;
  ws.send(message);
}
```

--------------------------------

### JavaScript WebSocket Automatic Reconnection

Source: https://github.com/jitwxs/blog-sample/blob/master/springboot-sample/ws-sample/src/main/resources/static/index1.html

Implements a reconnection mechanism for WebSocket connections. It uses a `lockReconnect` flag to prevent multiple simultaneous reconnection attempts and introduces a delay to avoid excessive requests, ensuring a controlled retry process.

```JavaScript
function reconnect(url) {
    if (lockReconnect) return;
    lockReconnect = true;
    //没连接上会一直重连，设置延迟避免请求过多
    setTimeout(function () {
        createWebSocket(url);
        lockReconnect = false;
    }, 2000);
}
```

--------------------------------

### JavaScript WebSocket Connection Closing Function

Source: https://github.com/jitwxs/blog-sample/blob/master/springboot-sample/ws-sample/src/main/resources/static/index1.html

Provides a simple utility function to explicitly close the WebSocket connection. This can be called when the client no longer needs the connection.

```JavaScript
function closeWebSocket(){
    ws.close();
}
```

--------------------------------

### JavaScript WebSocket Heartbeat Implementation

Source: https://github.com/jitwxs/blog-sample/blob/master/springboot-sample/ws-sample/src/main/resources/static/index1.html

Defines a heartbeat mechanism to maintain the WebSocket connection and detect server-side disconnections. It periodically sends 'ping' messages and expects a response (or any message) to reset its timers. If no message is received within a defined timeout, it assumes the connection is broken and initiates a close, triggering reconnection.

```JavaScript
var heartCheck = {
    timeout: 10000, // 10s发一次心跳
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
        //心跳包重置
        clearTimeout(this.timeoutObj);
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function () {
        var self = this;
        this.timeoutObj = setTimeout(function () {
            // 向后台发送心跳
            ws.send("ping");
            self.serverTimeoutObj = setTimeout(function () {
                //如果超过一定时间还没重置，说明后端主动断开了
                // 执行ws.close()会回调onclose，然后执行其中的reconnet。如果直接执行reconnect 会触发onclose导致重连两次
                ws.close();
            }, self.timeout)
        }, this.timeout)
    }
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.