【实战记录】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，是一个聊天室。
👉👉 在线聊天