【实战记录】WebSocket在vue2中的使用
感觉有帮助的小伙伴请点赞👍鼓励一下 ~
什么是WebSocket
官方说, WebSocket
是 HTML5
开始提供的一种在单个 TCP
连接上进行全双工通讯的协议。但是我对网络协议并不了解,用实际用途去解释它就是,它支持服务端主动给客户端发送消息。
在 WebSocket
出现之前,我们要获取服务端的数据只能通过 客户端向服务端发送请求,服务端接到请求后返回数据,但是这样有一个很明显的缺点就是那些需要 频繁接收数据 的场景就需要不断的向服务端发送请求.比如聊天室,实时天气等, 以前的方法就是"轮询",意思就是每隔一段时间,发送一次请求.这样就会有两个很明显的弊端.
一是非常浪费资源,二是做不到真正的实时刷新 WebSocket
的出现很好的解决了这个问题.
WebSocket 创建
执行下面语句之后,客户端就会与服务器进行连接。
WebSocket
对象作为一个构造函数,用于新建 WebSocket
实例。
var ws = new WebSocket('ws://localhost:3000');
WebSocket 属性
Socket.readyState
表示连接状态
- 0 - 表示连接尚未建立。
- 1 - 表示连接已建立,可以进行通信。
- 2 - 表示连接正在进行关闭。
- 3 - 表示连接已经关闭或者连接不能打开。
WebSocket 事件
事件 | 事件处理程序 | 描述 |
---|---|---|
open | Socket.onopen | 连接建立时触发 |
message | Socket.onmessage | 客户端接收服务端数据时触发 |
error | Socket.onerror | 通信发生错误时触发 |
close | Socket.onclose | 连接关闭时触发 |
WebSocket 方法
方法 | 描述 |
---|---|
Socket.send() | 使用连接发送数据 |
Socket.close() | 关闭连接 |
socket.io框架
Socket.IO
是一个完全由 JavaScript
实现、基于 Node.js
、支持 WebSocket
的协议用于实时通信、跨平台的开源框架,它包括了客户端的 JavaScript
和服务器端的 Node.js
同时支持多种轮序方式以及 websocket
,我们这次主要学习 websocket
。
如何在express中使用socket.io
先把服务器搭起来,这都是很基本的
//引用express框架
const express = require("express");
//创建网站服务器
const app = express();
//创建websocket服务器
var server = require("http").Server(app);
var io = require("socket.io")(server);
//监听端口
server.listen(3000, () => {
console.log("服务器已连接");
});
然后我们需要调用 io.on
注册监听事件
io.on("connection", function (socket) {
console.log("有人连接了");
socket.on("emit_method", function (data) {
console.log(data);
});
});
如果需要提交事件,使用 io.emit
socket.emit("show",args);
如何在vue中使用socket.io
首先安装依赖
npm i vue-socket.io --save
npm i socket.io-client --save
然后在 main.js
中注册
为了防止打开客户端默认连接服务器,我们这里设置 autoConnect: false
//引入依赖
import SocketIO from "vue-socket.io";
import ClientSocketIO from "socket.io-client";
import Vue from "vue";
Vue.use(
new SocketIO({
debug: false,//开启调试模式
connection: ClientSocketIO.connect("http://localhost:3000", {
transports: ["websocket"],//默认使用的请求方式
autoConnect: false,//是否自动连接
}),
})
);
在组件中使用
由于我们关闭了默认连接,所以需要在组件的生命周期中手动打开连接
mounted () {
this.$socket.open()
},
也别忘了组件销毁的时候手动断开连接,不然就只有在客户端关闭的时候才会默认断开
beforeDestroy () {
this.$socket.close()
}
监听 socket
的事件只需要在 data
同级新建 sockets
对象即可。
sockets: {
connecting () {
console.log("Socket 正在连接");
},
disconnect () {
alert("Socket 断开");
},
connect_error () {
console.log("Socket 连接失败");
},
connect () {
console.log("Socket 连接成功");
},
},
包括我们的自定义事件
sockets: {
show () {
console.log("客户端发过来了一个请求");
}
},
提交事件使用
this.$socket.emit('emit_method', args);
我写了一个demo
,是一个聊天室。
👉👉 在线聊天
转载自:https://juejin.cn/post/7031130069175271455