likes
comments
collection
share

【实战记录】WebSocket在vue2中的使用

作者站长头像
站长
· 阅读数 70

感觉有帮助的小伙伴请点赞👍鼓励一下 ~

什么是WebSocket

官方说, WebSocketHTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。但是我对网络协议并不了解,用实际用途去解释它就是,它支持服务端主动给客户端发送消息。

WebSocket 出现之前,我们要获取服务端的数据只能通过 客户端向服务端发送请求,服务端接到请求后返回数据,但是这样有一个很明显的缺点就是那些需要 频繁接收数据 的场景就需要不断的向服务端发送请求.比如聊天室,实时天气等, 以前的方法就是"轮询",意思就是每隔一段时间,发送一次请求.这样就会有两个很明显的弊端.

一是非常浪费资源,二是做不到真正的实时刷新 WebSocket 的出现很好的解决了这个问题.

WebSocket 创建

执行下面语句之后,客户端就会与服务器进行连接。

WebSocket 对象作为一个构造函数,用于新建 WebSocket 实例。

var ws = new WebSocket('ws://localhost:3000');

WebSocket 属性

Socket.readyState 表示连接状态

  • 0 - 表示连接尚未建立。
  • 1 - 表示连接已建立,可以进行通信。
  • 2 - 表示连接正在进行关闭。
  • 3 - 表示连接已经关闭或者连接不能打开。

WebSocket 事件

事件事件处理程序描述
openSocket.onopen连接建立时触发
messageSocket.onmessage客户端接收服务端数据时触发
errorSocket.onerror通信发生错误时触发
closeSocket.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
评论
请登录