首页 / VUE / vue项目使用websocket技术
vue项目使用websocket技术
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue项目使用websocket技术,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2122字,纯文字阅读大概需要4分钟。
内容图文
![vue项目使用websocket技术](/upload/InfoBanner/zyjiaocheng/1018/c14b119b14fd4408ad172c87b9d62a34.jpg)
一、为什么需要websocket?
前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中。如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷。
因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等。
websocket其他特点如下:
(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws
(如果加密,则为wss
),服务器网址就是 URL。
二、vue项目如何引用websocket?
vue使用websocket需要注意以下几点:
(1)首先需要判断浏览器是否支持websocket,关于如何解决兼容性问题可以参考 点击这里
(2)在组件加载的时候连接websocket,在组件销毁的时候断开websocket
(3)后端接口需要引入socket模块,否则不能实现连接
完整代码:
<template>
<div>
<form>
<div class="form-group">
<label for="contentText">内容</label>
<textarea class="form-control" name="contentText" id="contentText" rows="3"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" @click="send">发送信息</button>
</div>
</form>
</div>
</template>
<script>
export default {
data () {
return {
path: 'ws://192.168.0.1:8080', // 服务器地址
socket: '',
contentText: ''
}
},
mounted () {
// 初始化
this.init()
},
methods: {
init: function () {
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
}
},
open: function () {
console.log('socket连接成功')
},
error: function () {
console.log('连接错误')
},
getMessage: function (msg) {
console.log(msg.data)
},
send: function () {
this.socket.send(this.contentText)
},
close: function () {
console.log('socket已经关闭')
}
},
destroyed () {
// 销毁监听
this.socket.onclose = this.close
}
}
</script>
<style>
</style>
内容总结
以上是互联网集市为您收集整理的vue项目使用websocket技术全部内容,希望文章能够帮你解决vue项目使用websocket技术所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。