室内效果图网站,贵州省兴义市建设局网站,公司部门主页设计方案,建设部网站房地产资质1.0 认识 websocket
#1.0.1 什么是 websocket
和 http 协议类似#xff0c;websocket 也是是一个网络通信协议#xff0c;是用来满足前后端数据通信的。
#1.0.2 websocket 相比于 HTTP 的优势
HTTP 协议#xff1a;客户端与服务器建立通信连接之后#xff0c;服务器端只…1.0 认识 websocket
#1.0.1 什么是 websocket
和 http 协议类似websocket 也是是一个网络通信协议是用来满足前后端数据通信的。
#1.0.2 websocket 相比于 HTTP 的优势
HTTP 协议客户端与服务器建立通信连接之后服务器端只能被动地响应客户端的请求无法主动给客户端发送消息。
websocket 协议客户端与服务器建立通信连接之后服务器端可以主动给客户端推送消息了
#1.0.3 websocket 主要的应用场景
需要服务端主动向客户端发送数据的场景比如我们现在要做的智能聊天
#1.0.4 HTTP 协议和 websocket 协议对比图 1.1 vue3组合api中socket.io-client 的基本使用
#1.1.1 安装和配置 socket.io-client 参考 socket.io-client 的官方文档进行配置和使用 在项目中运行如下的命令安装 websocket 客户端相关的包 npm i socket.io-client4.0.0 -S# 如果 npm 无法成功安装 socket.io-client可以尝试用 yarn 来装包
# yarn add socket.io-client4.0.0在 xx.vue 组件中从 socket.io-client 模块内按需导入 io 方法 // 按需导入 io 方法调用 io(url) 方法即可创建 websocket 连接的实例
import { io } from socket.io-client事先setup中定义变量 socket用来接收 io() 方法创建的 socket 实例 let socket null#1.1.2 创建和销毁 socket 实例 在 xx.vue 组件的setup onMounted生命周期函数中创建 websocket 实例对象 onMounted(() {// 创建客户端 websocket 的实例socket io(ws://www.liulongbin.top:9999)
})在 xx.vue 组件的setup onBeforeUnmount生命周期函数中关闭 websocket 连接并销毁 websocket 实例对象 // 组件被销毁之前清空 sock 对象
onBeforeUnmount(() {// 关闭连接socket.close()// 销毁 websocket 实例对象socket null
})#1.1.3 监听连接的建立和关闭 在 xx.vue 组件的setup onMounted 生命周期函数中调用 socket.on(connect, fn) 方法可以监听到 socket 连接成功的事件 // 建立连接的事件
socket.on(connect, () console.log(connect: websocket 连接成功))在 xx.vue 组件的 created 生命周期函数中调用 socket.on(disconnect, fn) 方法可以监听到 socket 连接关闭的事件 // 关闭连接的事件
socket.on(disconnect, () console.log(disconnect: websocket 连接关闭))#1.1.4 接收服务器发送的消息 在 Chat.vue 组件的 setup onMounted 生命周期函数中调用 socket.on(message, fn) 方法即可监听到服务器发送到客户端的消息 // 接收到消息的事件
socket.on(message, msg console.log(msg))将服务器发送到客户端的消息存储到 xx.vue 组件的 list 数组中 // 接收到消息的事件
socket.on(message, msg {// 把服务器发送过来的消息存储到 list 数组中this.list.push({ name: xs, msg })
})#1.1.5 向服务器发送消息 客户端调用 socket.emit(send, 消息内容) 方法即可向 websocket 服务器发送消息 // 提交按钮的点击事件处理函数
const send () {// 如果输入的聊天内容为空则 return 出去if (!this.word) return// 向服务器发送消息socket.emit(send, this.word)// 将用户填写的消息存储到 list 数组中this.list.push({ name: me, msg: this.word })// 清空文本框中的消息内容this.word
}
