webSocket连接_websocket连接csdn

 created(){
            this.ws();
},
 methods:{
			ws(){
                // WebSocket
                if ("WebSocket" in window) {
                	// 获取协议，主机名
                    const {host, protocol } = window.location;
                    const pro = protocol === "https:" ? "wss://" : "ws://";
                    this.websocket = new WebSocket(`${pro}${host}/api/rates?id=${this.id}`);
                    // this.initWebSocket();
                    this.websocket.onerror = this.setErrorMessage;

                    // 连接成功
                    this.websocket.onopen = this.setOnopenMessage;

                    // 收到消息的回调
                    this.websocket.onmessage = this.setOnmessageMessage;

                    // 连接关闭的回调
                    this.websocket.onclose = this.setOncloseMessage;

                    // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                    window.onbeforeunload = this.onbeforeunload;
                } else {
                    alert("当前浏览器 Not support websocket");
                }
            },
            setErrorMessage() {
                console.log(this.websocket)
                console.log( "WebSocket连接发生错误   状态码：" + this.websocket.readyState);
            },
            setOnopenMessage() {
            	// 连接成功，状态码为1
                console.log("WebSocket连接成功    状态码：" + this.websocket.readyState);
            },
            setOnmessageMessage(event) {
                // 服务器推送的消息
                // console.log("服务端返回：" + event);
                // console.log(event)
                this.uploadingFileList = JSON.parse(event.data);
                let arr = [];
                this.uploadingFileList.map(item => {
                    var param = {};
                    param.Filename = item.Filename;
                    param.Totalsize = rates(item.Totalsize);
                    param.progress = Math.floor((item.Currentsize / item.Totalsize) * 100) > 1 ? Math.floor((item.Currentsize / item.Totalsize) * 100) : 1
                    param.Needtime = time(item.Needtime);
                    param.Speedrate = rates(item.Speedrate);
                    param.IsDone = item.IsDone;
                    arr.push(param);
                })
                this.tableData = arr;
            },
            setOncloseMessage() {
            	// 连接关闭，状态码为3
                console.log("WebSocket连接关闭    状态码：" + this.websocket.readyState);
            },
            onbeforeunload() {
                this.closeWebSocket();
            },
            closeWebSocket() {
                this.websocket.close();
            },
            blockUpload(scope){
                this.closeWebSocket();   // 关闭webSocket连接
                this.$emit('blockUpload');
                scope.IsDone = true;
            },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71