Websocket的用法及常见应用场景

// websocket握手：客户端发送的请求头
get wss://www.example.cn/websocket http/1.1  // 使用的https协议, 对应的wss请求
host: www.example.cn
connection: upgrade  // 带upgrade头的http1.1消息必须含有connection头，表示任何接受此消息的人都在转发此消息之前处理掉connection中指定的域（即不转发upgrade域）
upgrade: websocket  				// 定义转换协议的header域，如果服务器支持，客户端希望使用已经建立好的http（tcp）连接
sec-websocket-version: 13 	// 客户端支持的websocket协议的版本列表
origin: http://example.cn 	// origin为安全使用，防止跨站攻击，浏览器一般会使用这个来标识原始域，类似于referer。但与referer 不同的是，origin 只包含了协议和主机名称
sec-websocket-key: afmbhhbrquwclmnwdrwhxw== // 客户端随机生成的字符串，服务器会使用此字段组装成另一个key值（构造出一个sha-1 的信息摘要）放在握手返回信息里，用于客户端到服务器websocket的初始握手，避免夸协议攻击
sec-websocket-protocol: chat, superchat 		// 首标，告诉客户端应用程序可使用的协议
sec-websocket-extensions: permessage-deflate // 首标，permessage-deflate：协商使用传输数据压缩，client_max_window_bits：擦采用lz77压缩算法时，滑动窗口相关size大小

// websocket握手：服务器发出的响应头
http/1.1 101 // 服务端响应101状态码、upgrade和sec-websocket-accept首标才算连接成功，否则不能连接成功。
server: nginx/1.12.2
date: sat, 11 aug 2018 13:21:27 gmt
connection: upgrade // 指定一项或多项协议名，按优先级排序，以逗号分隔，这里表示升级为 websocket 协议
upgrade: websocket
sec-websocket-accept: slmywetyowus23qjyud/fa1hztc= // 根据sec-websocket-key加上特殊字符串，计算sha-1摘要，再进行 base64编码协议生成（可尽量避免普通http请求被误认为websocket协议）
sec-websocket-protocol: chat
sec-websocket-extensions: permessage-deflate;client_max_window_bits=15

<template>
  <div>
    <input type="text" :value="inputval" />
    <button @click="handlesend">send</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
  
const inputval = ref("");

const handlesend = () => {
  socket.send(inputval.value);
};

// 创建websocket对象，并指定服务器的地址
const socket = new websocket("ws://82.157.123.54:9010/ajaxchattest");

// 与服务器建立连接：发送消息到服务器
socket.onopen = () => {
  console.log("connect: ");
};
// 收到服务器发送的消息：event处理服务器返回的数据
socket.onmessage = (event) => {
  console.log("receive: ", event.data);
};
// 连接或通信过程中发生错误
socket.onerror = (event) => {
  console.log("errror: ", event.error);
};
// 与服务器断开连接
socket.onclose = (event) => {
  console.log("close: ", event.code);
};
</script>

<template>
	<div>
		<input type="text" :value="inputval" />
  		<button @click="handlesend">send</button>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const inputval = ref("");

let ws: any = null; // websocket实例
let isconnect: boolean = false; // 连接标识 避免重复连接
let recivecode: any = null; // 断线重连后，延迟5秒重新创建websocket连接，recivecode用来存储延迟请求的代码
let timeoutobj: any = null; // 延时发送消息对象（启动心跳时新建这个对象，收到消息后重置这个对象）

// websocket重连
const reconnect = () => {
  // 如果已经连上就不在重连了
  if (isconnect) {
    return;
  }
  cleartimeout(recivecode);
  // 延迟5秒重连 避免过多次过频繁请求重连
  recivecode = settimeout(() => {
    newwebsocket();
  }, 5000);
};

// 创建并初始化websocket实例
const newwebsocket = () => {
  // 判断当前环境是否支持websocket
  if (window.websocket) {
    if (!ws) {
      // 创建websocket对象，并指定服务器的地址
      ws = new websocket("ws://82.157.123.54:9010/ajaxchattest");
    }
    // 与服务器建立连接
    ws.onopen = () => {
      console.log("connect: ");
      isconnect = true;
      // 5分钟发一次心跳，比server端设置的连接时间稍微小一点，在接近断开的情况下以通信的方式去重置连接时间。
      timeoutobj = settimeout(() => {
        if (isconnect) ws.send(inputval.value);
      }, 300000);
    };
    // 收到服务器发送的消息
    ws.onmessage = (event: any) => {
      console.log("receive: ", event, event.data);
      cleartimeout(timeoutobj);
    };
    // 连接或通信过程中发生错误
    ws.onerror = (event: any) => {
      console.log("errror: ", event.error);
      isconnect = false; //连接错误 需要重连
      reconnect();
    };
    // 与服务器断开连接
    ws.onclose = (event: any) => {
      console.log("close: ", event.code);
      isconnect = false;
      // 连接错误 需要重连
      reconnect();
    };
  } else {
    console.log("当前浏览器不支持websocket");
  }
};

const handlesend = () => {
  newwebsocket();
  if (ws.readystate === ws.open) {
    // ws开启状态
    ws.send(inputval.value);
  } else if (ws.readystate === ws.connecting) {
    // 正在开启状态，则等待1s后重新调用
    settimeout(function () {
      handlesend();
    }, 1000);
  } else {
    // 若未开启 ，则等待1s后重新调用
    settimeout(function () {
      handlesend();
    }, 1000);
  }
};
</script>