vue中使用websocket

最新推荐文章于 2025-06-20 17:38:52 发布

YangYun_Coder

最新推荐文章于 2025-06-20 17:38:52 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_32971359/article/details/93632057

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在Vue.js项目中使用WebSocket进行实时双向通信，包括初始化WebSocket连接、监听不同事件并处理错误，以及如何从客户端发送消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket基础

<template>
	<div class="websocket">
		<input type="text" placeholder="输入消息" v-model="value">
		<button @click="send">发送</button>
		<div class="message">{{message}}</div>
	</div>
</template>

<script>
export default {
  name: 'websocket',
  data(){
	  return {
		  socket: '',
		  value: '',
		  message: ''
	  }
  },
  mounted() {
	//WebSocket
	this.initWebsocket();
  },
  methods:{
	  //初始化websocket
	  initWebsocket(){
		  //判断浏览器是否支持WebSocket
		  if ("WebSocket" in window){
		  	console.log("您的浏览器支持 WebSocket!");
		  	// 打开一个 web socket
		    this.socket = new WebSocket("ws://echo.websocket.org");
			this.socket.onopen = this.socketOnopen;
		  	this.socket.onmessage = this.socketOnmessage;
			this.socket.onerror = this.socketOnerror;
			this.socket.onclose = this.socketOnclose;
		  }else{
		  	alert("您的浏览器不支持 WebSocket!");
		  }
	  },
	  //连接建立时触发
	  socketOnopen(){
		console.log('链接成功')
	  },
	  //客户端接收服务端数据时触发
	  socketOnmessage(e){
	  	console.log(e)
		this.message = e.data
	  },
	  //通信发生错误时触发
	  socketOnerror(){
	  		  
	  },
	  //连接关闭时触发
	  socketOnclose(){
	  		  
	  },
	  //点击发送
	  send(){
		  this.socket.send(this.value)
	  }
  }
}
</script>

<style>
.message{
	width: 500px;
	height: 31.25rem;
	border: 1px solid #000;
}
</style>