websocket 使用示例

前言
html中使用
vue3中使用
- 1、安装websocket依赖
- 2、代码
vue2中使用
- 1、安装websocket依赖
- 2、代码

前言

即时通讯webSocket 的使用
在这里插入图片描述

html中使用

以下是一个简单的 HTML 页面示例，它连接到 WebSocket 服务器并包含一个文本框、一个发送按钮以及 WebSocket 连接、读取和关闭事件的监听。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket 示例</title>
    <script>
      // 1. 创建一个 WebSocket 对象
      let socket = new WebSocket("ws://192.168.22.199/WebSocket/");
      // 2. 监听 WebSocket 连接事件
      socket.addEventListener("open", function (event) {
        console.log("连接事件成功:", event);
      });
      // 3. 监听 WebSocket 收到消息事件
      socket.addEventListener("message", function (event) {
        console.log("接收到的消息事件:", event.data);
      });
      // 4. 监听 WebSocket 关闭事件
      socket.addEventListener("close", function (event) {
        console.log("关闭WebSocket:", event);
      });
      // 5. 监听 WebSocket 出错事件
      socket.addEventListener("error", function (event) {
        console.error("WebSocket error报错:", event);
      });

      // 6、webSocket发送消息
      function sendMessage() {
        let message = document.getElementById("messageInput").value;
        if (message) {
          socket.send(message);
        }
      }
    </script>
  </head>
  <body>
    <h1>WebSocket 示例</h1>
    <input type="text" id="messageInput" placeholder="请输入要发送的信息" />
    <button onclick="sendMessage()">Send</button>
  </body>
</html>

vue3中使用

1、安装websocket依赖

npm install websocket

2、代码

<template>
  <div>
    <div>
      <button @click="send">发消息</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref， onUnmounted, onMounted } from 'vue'

export default defineComponent({
  name: 'coPy',
  setup () {

    const path = 'ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5'

    let socket = ''
    const open = () => {
      console.log('socket连接成功')
    }
    const error = () => {
      console.log('连接错误')
    }
    const getMessage = (msg) => {
      console.log(msg.data)
    }
    const send = () => {
      socket.send('输入成功')
      console.log('消息发送成功')
    }
    const close = () => {
      console.log('socket已经关闭')
    }
    const initWs = () => {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        socket = new WebSocket(path)
        // 监听socket连接
        socket.onopen = open
        // 监听socket错误信息
        socket.onerror = error
        // 监听socket消息
        socket.onmessage = getMessage
      }
    }
    onMounted(() => {
      initWs()
    })

    onUnmounted(() => {
      close()
    })

    return {
    }
  }
})
</script>
<style lang="less" scoped>
</style>

vue2中使用

1、安装websocket依赖

npm install websocket

2、代码

<template>
    <div>
        <button @click="send">发消息</button>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        getMessage: function (msg) {
            console.log(msg.data)
        },
        send: function () {
            this.socket.send(params)
        },
        close: function () {
            console.log("socket已经关闭")
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>
 
<style>
 
</style>