websocket学习看这一篇就足够啦~

标签：function WebSocket 一篇浏览器 ws 足够 websocket 连接客户端

websocket概念

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

检测浏览器是否支持WebSocket

if ("WebSocket" in window){
    ...
} else {
   alert("您的浏览器不支持 WebSocket!");
}

或者

if ( typeof(WebSocket) != "function" ) {
   alert("您的浏览器不支持 WebSocket!")
} else {
   ...
}

创建WebSocket 对象

var Socket = new WebSocket(url, [protocol] );
//var Socket = new WebSocket('ws://example.com');

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

1.连接 WebSocket。(onopen)。在该事件里可以检查WebSocket 是否成功连接。

Socket.onopen = function() {
    console.log('WebSocket connected');
};

2.接收来自 WebSocket 的消息。（onmessage）。

Socket.onmessage = function(e) {
    console.log('WebSocket message:', e.data);
};

3.WebSocket通信发生错误时触发。（onerror）。可用于发生错误时重连websocket。

Socket.onerror = function() {
    console.log('WebSocket error');
    //that.reconnect(); //重连
};

4.WebSocket连接关闭时触发，可用于检测WebSocket是否成功关闭。（onclose）。也可以可用于WebSocket连接断开时进行重连

Socket.onclose = function() {
  console.log('WebSocket close');
  //if (!that.userClose) {
  //  that.reconnect(); //重连
  //}
};

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

1.向 WebSocket 发送消息。（send）。

Socket.send('Hello, WebSocket!');

2.使用 WebSocket.close 方法关闭 WebSocket

Socket.close();

WebSocket报错类型集锦（含处理建议）

1.当遇到浏览器不支持 WebSocket 的情况时，会收到“WebSocket is not supported”的错误提示。为了解决这一问题，首先需要确认所使用的浏览器版本是否在支持 WebSocket 技术的兼容性列表之内。

2.对于 WebSocket 连接关闭、发生错误、握手失败、连接超时，以及因协议、网络或服务器问题导致的关闭等情形，通常会有相应的错误信息提示，例如“WebSocket connection closed”、“WebSocket error”、“WebSocket handshake error”、“WebSocket timeout”等。针对这些情况，可以通过在 WebSocket 对象上设置相应的事件监听器来处理这些问题，具体包括：

onclose 事件：用于处理 WebSocket 连接被关闭的情况，无论是由服务器主动关闭还是因为其他原因（如协议错误、网络问题）造成的关闭。在此事件处理器中，可以执行重新连接逻辑或是向用户显示友好的错误消息。

onerror 事件：用于捕捉 WebSocket 在建立连接或数据传输过程中发生的任何错误。此事件处理器是处理所有未预见错误的通用方式，可以在其中记录错误详情或是采取适当的恢复措施。

ontimeout 事件：虽然 WebSocket 标准本身并不直接提供 ontimeout 事件，但可以通过设定定时器等方式实现超时检测机制。一旦检测到超时，可以模拟触发一个超时处理过程，比如尝试重新建立连接。

通过合理地配置上述事件监听器，可以有效地管理和响应 WebSocket 连接的各种异常状态，从而提高应用的稳定性和用户体验。

WebSocket 实例（html版本）

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>WebSocket实例</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

实际开发示例（vue版本）

以下代码是笔者在前面一个公司开发的一个小功能，简易的使用了下websocket，很适合初学者参考学习

<template>
  <div class="chat-box">
    <header>聊天室 (在线:{{ count }}人)</header>
    <div ref="msg-box" class="msg-box">
      <div
        v-for="(i, index) in list"
        :key="index"
        class="msg"
        :style="i.userId === userId ? 'flex-direction:row-reverse' : ''"
      >
        <div class="user-head">
          <img :src="i.avatar" height="30" width="30" :title="i.username" />
        </div>
        <div class="user-msg">
          <span :style="i.userId === userId ? ' float: right;' : ''" :class="i.userId === userId ? 'right' : 'left'">{{
            i.content
          }}</span>
        </div>
      </div>
    </div>
    <div class="input-box">
      <input ref="sendMsg" v-model="contentText" type="text" @keyup.enter="sendText()" />
      <div class="btn" :class="{ ['btn-active']: contentText }" @click="sendText()">发送</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      count: 0,
      userId: this.$store.getters.id, // 当前用户ID
      username: this.$store.getters.name, // 当前用户昵称
      avatar: this.$store.getters.avatar, // 当前用户头像
      list: [], // 聊天记录的数组
      contentText: '', // input输入的值
    }
  },
  mounted() {
    this.initWebSocket()
  },
  destroyed() {
    // 离开页面时关闭websocket连接
    this.ws.onclose(undefined)
  },
  methods: {
    // 发送聊天信息
    sendText() {
      const _this = this
      _this.$refs.sendMsg.focus()
      if (!_this.contentText) {
        return
      }
      const params = {
        userId: _this.userId,
        username: _this.username,
        avatar: _this.avatar,
        msg: _this.contentText,
        count: _this.count,
      }
      _this.ws.send(JSON.stringify(params)) // 调用WebSocket send()发送信息的方法
      _this.contentText = ''
      setTimeout(() => {
        _this.scrollBottm()
      }, 500)
    },
    // 进入页面创建websocket连接
    initWebSocket() {
      const _this = this
      // 判断页面有没有存在websocket连接
      if (window.WebSocket) {
        const serverHot = window.location.hostname
        const sip = '房间号'
        // 填写本地IP地址 此处的 :9101端口号 要与后端配置的一致！
        const url = 'ws://' + serverHot + ':9101' + '/groupChat/' + sip + '/' + this.userId // `ws://127.0.0.1/9101/groupChat/10086/聊天室`
        const ws = new WebSocket(url)
        _this.ws = ws
        ws.onopen = function (e) {}
        ws.onclose = function (e) {}
        ws.onerror = function () {}
        ws.onmessage = function (e) {
          // 接收服务器返回的数据
          const resData = JSON.parse(e.data)
          _this.count = resData.count
          _this.list = [
            ..._this.list,
            { userId: resData.userId, username: resData.username, avatar: resData.avatar, content: resData.msg },
          ]
        }
      }
    },
    // 滚动条到底部
    scrollBottm() {
      const el = this.$refs['msg-box']
      el.scrollTop = el.scrollHeight
    },
  },
}
</script>
<style scoped>
...
</style>

拓展

WebSocket工作原理

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务器和客户端之间进行实时、双向的数据交换，而不需要每次都建立新的连接。WebSocket协议在2011年被IETF标准化，并被纳入HTML5规范。

WebSocket工作原理如下：

握手：客户端和服务器通过HTTP协议进行握手，以建立WebSocket连接。客户端发送一个HTTP请求，其中包含特定的头部信息，如`Upgrade: websocket`和`Connection: Upgrade`，以表明请求升级到WebSocket协议。服务器接收到请求后，如果支持WebSocket协议，会返回一个HTTP 101状态码，表示协议升级成功。
建立连接：一旦握手成功，客户端和服务器之间的连接就变成了WebSocket连接。这个连接在客户端和服务器之间是持久的，允许数据在客户端和服务器之间实时双向传输。
数据传输：在连接建立后，客户端和服务器可以通过WebSocket连接发送和接收数据。数据以帧的形式传输，帧可以是文本帧或二进制帧。文本帧包含UTF-8编码的文本数据，而二进制帧包含二进制数据。
关闭连接：当客户端和服务器不再需要通信时，可以通过发送一个特殊的关闭帧来关闭WebSocket连接。一旦连接关闭，客户端和服务器不能再通过这个连接发送或接收数据。

WebSocket协议的主要优点包括：

实时性：由于WebSocket连接是持久的，数据可以实时传输，适用于需要实时数据交换的应用，如聊天应用、实时游戏等。

效率：与传统的HTTP轮询相比，WebSocket减少了不必要的网络开销，因为不需要每次请求都建立新的连接。

双向通信：WebSocket支持客户端和服务器之间的双向通信，而传统的HTTP协议是单向的。

WebSocket协议广泛应用于需要实时数据交换的Web应用中，如在线聊天、实时股票行情、多人在线游戏等。

websocket是否有局限性？

WebSocket协议是一种强大的通信协议，但它也有一些局限性：

浏览器支持：虽然大多数现代浏览器都支持WebSocket，但一些旧版本的浏览器可能不支持。此外，一些移动设备的浏览器也可能不完全支持WebSocket。

防火墙和代理：在某些情况下，防火墙和代理服务器可能会阻止WebSocket连接。这可能会影响WebSocket的使用，特别是在企业网络或某些互联网服务提供商的网络环境中。

资源消耗：虽然WebSocket连接是持久的，但每个WebSocket连接都会消耗服务器资源。如果同时有大量的WebSocket连接，服务器可能会面临资源瓶颈。

安全性：虽然WebSocket提供了加密的连接（通过wss://），但仍然需要确保WebSocket连接的安全性。例如，需要使用HTTPS来保护数据传输过程。

兼容性：虽然WebSocket协议在2011年被IETF标准化，并被纳入HTML5规范，但一些旧的或非标准的WebSocket实现可能不完全兼容。

调试和监控：由于WebSocket连接是持久的，调试和监控WebSocket连接可能会比HTTP连接更复杂。需要使用特定的工具和技术来监控和管理WebSocket连接。

总的来说，虽然WebSocket协议提供了许多优势，但也需要注意其局限性，并根据具体的应用场景进行适当的调整和优化。

标签：function,WebSocket,一篇,浏览器,ws,足够,websocket,连接,客户端
From： https://blog.csdn.net/yxlyttyxlytt/article/details/143854850