vue3使用websocket(亲测解决)-Toy模板网

这篇具有很好参考价值的文章主要介绍了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连接关闭");
    }
  }
}

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

所有代码合集文章来源地址https://www.toymoban.com/news/detail-623210.html

<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>

到了这里，关于vue3使用websocket(亲测解决)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！