vue3使用websocket(亲测解决)

1.需要后端给你一个ws的接口比如：

ws://192.168.2.19:8080/chat/${name}

我这里的name是后端要求登录成功后搞得

2.后端给我个登录的接口，需要登录后才能实现长链接

const login = (name) => {
  toLogin(data).then(res => {
    console.log(res);
    init(name)
  }).catch(err => {
    console.log(err);
  })
}

3.封装init方法

const init = (name) => {
  if(typeof(WebSocket) === "undefined"){
      alert("您的浏览器不支持socket")
  }else{
     const ws = new WebSocket(`ws://192.168.2.19:8080/chat/${name}`)
    //  //连接发生错误的回调方法
    ws.onerror = function () {
      console.log("ws连接发生错误");
    };
    //连接成功建立的回调方法
    ws.onopen = function () {
      console.log("ws连接成功");
    }
    //接收到消息的回调方法
    ws.onmessage = function (event) {
      console.log(name + '的',event.data);
    }
    //连接关闭的回调方法
    ws.onclose = function () {
      console.log("ws连接关闭");
    }
  }
}

网上找了一堆没用的方法，不建议看

所有代码合集

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {toLogin} from '../http/index'

let word = ref('')
const data = {
  username:'zhangsan',
  password:'123'
}
const login = (name) => {
  toLogin(data).then(res => {
    console.log(res);
    init(name)
  }).catch(err => {
    console.log(err);
  })
}
const init = (name) => {
  if(typeof(WebSocket) === "undefined"){
      alert("您的浏览器不支持socket")
  }else{
     const ws = new WebSocket(`ws://192.168.2.19:8080/chat/${name}`)
    //  //连接发生错误的回调方法
    ws.onerror = function () {
      console.log("ws连接发生错误");
    };
    //连接成功建立的回调方法
    ws.onopen = function () {
      console.log("ws连接成功");
    }
    //接收到消息的回调方法
    ws.onmessage = function (event) {
      console.log(name + '的',event.data);
    }
    //连接关闭的回调方法
    ws.onclose = function () {
      console.log("ws连接关闭");
    }
  }
}
</script>

<template>
  <h1>Web Socket</h1>
  <div>聊天框 <textarea type="text" v-model="word" ></textarea></div>
  <button @click="login('zhangsan')">张三登录</button>
  <button @click="login('李四')">李四登录</button>
  <button @click="send">发送</button>
</template>

<style scoped>
</style>