数字钱币生意业务体系、正在线文档多人编纂、

怪人怪事 2023-05-04 19:38www.bnfh.cn怪人怪事

数字货币交易系统、在线文档多人编辑、在线客服系统都要用的技术

一、WebSocket概述

WebSocket是一种在单个TCP连接上进行全双工通信的协议，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据，在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的链接，并进行双向数据传输

在WebSocket出现之前，我们想要获取服务端的数据只能通过客户端向服务端发送请求，如果当服务端响应数据，客户端想要实时的更新，我们采用的是Ajax轮询，非常浪费资源和降低性能，并且不能真正的实时刷新，WebSocket可以解决这个问题

二、WebSocket使用

1、Express服务端

安装依赖

npm i socket.io

project/s.js

const express = require("express");

const app = express();
//实例化WebSocket对象
let s = require("http").Server(app);

var io = require("socket.io")(s);
//监听端口
server.listen(3000, () => {
  console.log("服务器已连接");
});

// 监听connection
// 如果有客户端进行连接，那么会监听
io.on("connection", function (socket) {
    console.log("建立连接......");
    // 监听handler
    // 当客户端触发了handler事件，那么会监听到
    / socket.on("handler", function (data) {
      console.log(data); // 你好，我是客户端的数据
    }); /
    
    // 触发sho事件并且传递数据
    // sho是客户端方法
    socket.emit("clientHandler","你好，我是服务端数据");
  });

2、Vue2客户端

安装依赖

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(
  ne SocketIO({
    debug:false,
    connection:ClientSocketIO.connect("s://localhost:3000",{
      transports:["ebsocket"],
      autoConnect:false // 默认不建立连接
    })
  })
);

ne Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

组件中使用WebSocket

project/src/vies/WebSocket.vue

上一篇：山君举世基金首创人： AI等新技能带来新机会发下一篇：为节省本钱联邦快递团体公布将Express和Ground归并

数字钱币生意业务体系、正在线文档多人编纂、

数字货币交易系统、在线文档多人编辑、在线客服系统都要用的技术

一、WebSocket概述

二、WebSocket使用

1、Express服务端

2、Vue2客户端

{{msg}}

怪异网

怪异导航

奇闻怪事

灵异事件

世界之最