vue + websocket

文章目录

vue + websocket

  1. 在Vue项目的入口文件(通常是main.js)中引入和配置WebSocket:
import VueNativeSock from 'vue-native-websocket';

Vue.use(VueNativeSock, 'ws://localhost:8080', {
  reconnection: true, // 是否自动重连
  reconnectionAttempts: 5, // 重连尝试次数
  reconnectionDelay: 3000, // 重连延迟时间(毫秒)
});
  1. 新建vue组件
<template>
<!-- websocketceshi -->
  <div class="layout">
    <div class="msgBody">{{ msg }}</div>
    <input v-model="sendMsg" style="width:200px;height:30px;margin-top:20px"/>
    <button @click="sendMessage" style="width:100px;height:30px;">发送</button>
    <button @click="close" style="width:100px;height:30px;">断开链接</button>
    <button @click="init" style="width:100px;height:30px;">建立链接</button>
  </div>
</template>

<script>
export default {
  name: "LayOut",
  data() {
    return {
      msg: "",
      sendMsg: "",
      //后台的地址,只需要动localhost:8001部分,改成你后端的地址。我自己电脑上本地开的就直接用本地的了。
      //后面webSocket是后台设定的接口地址,admin是你这个前台的识别码id。用于区分,比如你多个地方链接后台,后台推送数据的时候需要根据这个id不同,给对应的人推送,不然就推送到所有建立链接的网页上了
      path: "ws://localhost:8001/webSocket/admin",
      //存websocket实例化的
      socket: "",
    };
  },
  methods: {
    //用于前台发送数据到后台,调用websocket中的send方法把数据发过去。
    sendMessage() {
      this.socket.send(this.sendMsg);
    },
    //初始化建立前后台链接
    init() {
      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;
        this.socket.onclose = this.close;
      }
    },
    //链接成功时的回调函数
    open() {
      console.log("socket连接成功");
    },
    //链接错误时的回调
    error(err) {
      console.log("连接错误" + err);
    },
    //后台消息推送过来,接收的函数,参数为后台推过来的数据。
    getMessage(msg) {
      this.msg = msg.data;
    },
    //链接关闭的回调
    close(event) {
      //socket是链接的实例,close就是关闭链接
      this.socket.close()
      console.log("断开链接成功");
    },
  },
  created() {
    //开局初始化建立链接
    this.init();
  },
};
</script>
<style scoped>
.layout {
  position: relative;
  width: 100%;
  height: 100%;
}
.msgBody {
  width: 500px;
  height: 300px;
  border: 1px solid rgb(95, 79, 79);
}
</style>
  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个流行的 JavaScript 前端框架,而 WebSocket 是一种基于 TCP 的网络协议,可以实现实时双向通信。 要在 Vue.js 中使用 WebSocket,可以使用原生的 WebSocket API 或第三方库(如 socket.io、SockJS 等)。 使用原生的 WebSocket API,可以在 Vue.js 组件中创建 WebSocket 实例,然后通过监听事件来处理 WebSocket 的消息和状态。 示例代码: ```javascript // MyWebSocket.vue <template> <div> <p>{{ message }}</p> <input v-model="inputMessage" /> <button @click="sendMessage">Send</button> </div> </template> <script> export default { data() { return { ws: null, message: '', inputMessage: '' }; }, mounted() { this.ws = new WebSocket('ws://localhost:8080'); this.ws.addEventListener('open', (event) => { console.log('WebSocket connected'); }); this.ws.addEventListener('message', (event) => { this.message = event.data; }); this.ws.addEventListener('close', (event) => { console.log('WebSocket disconnected'); }); }, methods: { sendMessage() { this.ws.send(this.inputMessage); this.inputMessage = ''; } } }; </script> ``` 在上面的示例中,我们在组件的 `mounted` 钩子中创建了一个 WebSocket 实例,并监听了 `open`、`message` 和 `close` 事件。我们还定义了一个 `sendMessage` 方法,用于发送消息。 可以看到,我们使用了 `v-model` 来绑定输入框的值,并在按钮的点击事件中调用了 `sendMessage` 方法来发送消息。 当 WebSocket 收到消息时,它会触发 `message` 事件,我们在事件处理程序中更新组件的 `message` 数据,从而实现了实时更新视图的效果。 当 WebSocket 连接断开时,它会触发 `close` 事件,我们可以在事件处理程序中执行一些清理操作。 以上就是在 Vue.js 中使用 WebSocket 的基本方法,如果需要更高级的功能,可以考虑使用第三方库来简化开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值