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

一、WebSocket概述

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

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

二、WebSocket使用

1、Express服务端

安装依赖

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","你好，我是服务端数据");
  });
           

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(
  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

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    // 建立连接 
    this.$socket.open();
    // 触发服务端handler事件并传递数据
    this.$socket.emit("handler", "你好，我是客户端的数据");
  },

  methods: {
   
  },
  sockets: {
    connecting() {
      console.log("正在连接...");
    },
    connect_error() {
      console.log("连接失败");
    },
    clientHandler(params) {
      this.msg= params; // 你好，我是服务端数据
    },
  },
};
</script>

<style lang="scss" scoped></style>