WebSocket是一种在单个TCP连接上进行全双工通信的协议,使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的链接,并进行双向数据传输
在WebSocket出现之前,我们想要获取服务端的数据只能通过客户端向服务端发送请求,但是如果当服务端响应数据,客户端想要实时的更新,我们采用的是Ajax轮询,但是非常浪费资源和降低性能,并且不能真正的实时刷新,WebSocket可以解决这个问题
安装依赖
npm i socket.io
project/ws.js
const express = require("express");
const app = express();
//实例化WebSocket对象
let ws = require("http").Server(app);
var io = require("socket.io")(ws);
//监听端口
server.listen(3000, () => {
console.log("服务器已连接");
});
// 监听connection
// 如果有客户端进行连接,那么会监听
io.on("connection", function (socket) {
console.log("建立连接......");
// 监听handler
// 当客户端触发了handler事件,那么会监听到
/* socket.on("handler", function (data) {
console.log(data); // 你好,我是客户端的数据
}); */
// 触发show事件并且传递数据
// show是客户端方法
socket.emit("clientHandler","你好,我是服务端数据");
});
安装依赖
npm i vue-socket.io socket.io-client
注册WebSocket
project/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import SocketIO from 'vue-socket.io';
import ClientSocketIO from 'socket.io-client';
Vue.use(
new SocketIO({
debug:false,
connection:ClientSocketIO.connect("ws://localhost:3000",{
transports:["websocket"],
autoConnect:false // 默认不建立连接
})
})
);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
组件中使用WebSocket
project/src/views/WebSocket.vue
{{msg}}
页面更新:2024-05-19
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号