前端实现实时通信的效果的方法

一.websocket

什么是websocket?

定义:WebSocket 协议:WebSocket 是一个基于 TCP 的协议,允许在客户端和服务器之间建立一个持久的双向通信通道。它的通信通常基于一个简单的 HTTP 请求来建立连接,然后切换到 WebSocket 协议。

利用websocket实现实时通信的过程

js 复制代码
  <script>
    // 创建 WebSocket 连接
    const socket = new WebSocket('ws://localhost:8080'); // WebSocket 服务器地址

    // 监听 WebSocket 连接成功事件
    socket.onopen = () => {
      console.log('WebSocket connection established');
      displayChatMessage('System', 'Connected to the WebSocket server');
    };

    // 监听接收到的消息
    socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      console.log('Received message:', message);
      if (message.type === 'chat') {
        displayChatMessage(message.user, message.content);
      }
    };

    // 监听 WebSocket 错误事件
    socket.onerror = (error) => {
      console.error('WebSocket error: ', error);
    };

    // 监听 WebSocket 关闭事件
    socket.onclose = () => {
      console.log('WebSocket connection closed');
      displayChatMessage('System', 'Disconnected from the WebSocket server');
    };

    // 显示聊天消息
    function displayChatMessage(user, content) {
      const chatBox = document.getElementById('chatBox');
      const message = document.createElement('p');
      message.textContent = `${user}: ${content}`;
      chatBox.appendChild(message);
      chatBox.scrollTop = chatBox.scrollHeight; // 滚动到最新消息
    }

    // 发送消息到服务器
    document.getElementById('sendButton').onclick = () => {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      if (message) {
        // 发送消息到服务器
        const data = JSON.stringify({ type: 'chat', content: message, user: 'Client1' });
        socket.send(data);

        // 显示发送的消息
        displayChatMessage('You', message);
        messageInput.value = ''; // 清空输入框
      }
    };
  </script>

实例方法总结:

  • 1.onopen:监听连接建立成功,而后触发的事件
  • 2.onmessage:监听收到websocket服务器发送的新请求执行的回调函数
  • 3.onerror:监听websocket失败触发的回调函数
  • 4.send:向服务器发送请求
  • 5.onclose:关闭websocket连接触发的回调函数

二.轮询(polling)和长轮询(long Polling)

1.轮询:客户端定期向服务端发送请求,一般是用例如setInterval每隔一段时间向服务器发送请求,

js 复制代码
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'

const data = ref(null)
let timer = null

const fetchData = async () => {
  try {
    const response = await axios.get('/api/data')
    data.value = response.data
  } catch (error) {
    console.error('获取数据失败', error)
  }
}

onMounted(() => {
  fetchData() // 组件加载时先执行一次
  timer = setInterval(fetchData, 5000) // 每5秒请求一次
})

onUnmounted(() => {
  clearInterval(timer) // 组件卸载时清除定时器,以免引起内存泄漏
})
</script>

<template>
  <div>
    <h3>普通轮询示例</h3>
    <pre>{{ data }}</pre>
  </div>
</template>

-这样的缺点是

  • 1,会造成性能的浪费,造成网页和服务器资源的浪费,有一些请求返回的是没有变化的数据
  • 2,数据更新不及时,有可能数据的更新位于两次轮询请求之间,距离下一次轮询请求还有时间间隔

2.长轮询:是一种改进的轮询方式,客户端发送请求到服务端,服务端会等待有数据变化再返回,或者超时。即客户端发送请求到服务端后,服务端保持连接。当数据有更新时,服务端立刻响应返回新数据并关闭连接,客户端收到响应后,会立即发送新请求继续等待;当数据在超时限定时间内无更新,则服务端返回请求超时,客户端重新发起请求等待下一次的数据可能更新。

js 复制代码
//实现:用axios或者fetch的递归调用
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'

const data = ref(null)
let isPolling = true

const longPolling = async () => {
  if (!isPolling) return
  try {
    const response = await axios.get('/api/long-polling', { timeout: 30000 }) // 30秒超时
    data.value = response.data
    longPolling() // 递归调用,立即发送下一个请求
  } catch (error) {
    console.error('长轮询失败', error)
    setTimeout(longPolling, 2000) // 失败后等待2秒重试
  }
}

onMounted(() => {
  isPolling = true
  longPolling()
})

onUnmounted(() => {
  isPolling = false // 组件卸载时停止轮询
})
</script>

<template>
  <div>
    <h3>长轮询示例</h3>
    <pre>{{ data }}</pre>
  </div>
</template>
相关推荐
水煮白菜王15 分钟前
首屏加载时间优化解决
前端·javascript·react.js
还是鼠鼠17 分钟前
Node.js 中间件-中间件的概念与格式
前端·javascript·vscode·node.js·express
Hamm26 分钟前
为了减少维护成本,我们把AirPower4T拆成了一个个NPM包
前端·vue.js·typescript
路光.38 分钟前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
xiezhuangshunv1 小时前
20250401-vue-声明触发的事件
前端·javascript·vue.js
PBitW1 小时前
微信小程序 -- 原生封装table
前端·微信小程序
小满zs2 小时前
React-router v7 第一章(安装)
前端·react.js
程序员小续2 小时前
前端低代码架构解析:拖拽 UI + 代码扩展是怎么实现的?
前端·javascript·面试
wangpq2 小时前
微信小程序地图callout气泡图标在ios显示,在安卓机不显示
前端·vue.js