WebSocket前端+vue

最新推荐文章于 2024-07-22 10:57:42 发布

赛蒙Simon

最新推荐文章于 2024-07-22 10:57:42 发布

阅读量757

点赞数 1

分类专栏：前端js 文章标签： WebSocket

本文链接：https://blog.csdn.net/qq_33435488/article/details/100578440

版权

本文介绍了WebSocket在前端与Vue应用中的结合，讲解了主要的连接和操作代码，包括WebSocket对象的创建、onopen、onmessage、onclose和onerror事件的处理。还详细解析了WebSocket对象的send方法用于发送消息以及close方法用于关闭连接。此外，提到readyState属性用于报告WebSocket的连接状态。文章提供了后端代码的参考链接。

摘要由CSDN通过智能技术生成

WebSocket前端+vue
1.主要代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<!--引入样式-->
	<style>
		/* 屏蔽界面初始化闪跳 vue脚本闪跳*/
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body style="overflow:hidden" scroll="no">
	<div id="WebSocket" style="overflow: hidden;" v-cloak>
		<div>
			<input type="text" v-model="text">
			<button @click="send()">发送消息</button>
			<br>
			<button @click="closeWebSocket()">关闭websocket连接</button>
			<br>		
			<button @click="initWebSocket()">开启websocket连接</button>
			<br>
			<div>{
  {data}}</div>
		</div>

	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<

最低0.47元/天解锁文章

赛蒙Simon

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
WebSocket前端+vue

WebSocket前端+vue1.主要代码<!DOCTYPE html><html><head> <meta charset="utf-8">  <style> /* 屏蔽界面初始化闪跳 vue脚本闪跳*/ [v-cloak] { display: none; } &l...
复制链接

扫一扫

专栏目录