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

一尾流莺

发布于 2022-12-10 13:08:33

4.5K0

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

什么是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，是一个聊天室。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-11-16，如有侵权请联系 cloudcommunity@tencent.com 删除

socket.io

socket编程

node.js

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度