vue项目使用socket.io-client实现通信对话

使用环境：vue2+socket.io-client

vue3也可以使用只是js的写法稍稍改变了

1.webScoket通信对话

  原理:服务端主要依赖于socket.io-client  

  下载载方式:

npm i socket.io-client

  页面中引入

       import io from "socket.io-client";

  使用说明:

  1.我的后端使用node搭建的所以node需要下载socket.io (我们只说客户端)

  2.调用 io(url) 创建一个链接 例:this.clientSocket = io("http://localhost:80"); // 连接服务器

  3.使用.on 调用 connect方法查看是否连接成功 例:

                                              this.clientSocket.on("connect", () => {

                                                console.log("连接成功客户端");

                                              });

  4.一般这时候我们需要监听服务器什么时候给我们发信息 要接收一下例:

                                              this.clientSocket.on("fromClient", (data) => {

                                                console.log(data)

                                              });

    在这里对接收的信息进行操作

  5.当我们点击发送信息的时候调用.emit方法去发送信息 (服务端同样也是用.on方法接收.emit方法发送)例:

    this.clientSocket.emit("sendClient", this.message1);

    (注意:这里面广播的名字一定要和服务端一致要不然它找不到给谁发信息)

  6.做完这些 当页面销毁的时候要断开链接要不然会出大事(内存溢出 页面卡顿)例:

    this.clientSocket.disconnect(); // 断开与服务器的连接

前端代码：

<template>
  <div style="display: flex">
    <div class="box">
      <h2>客户端</h2>
      <div class="content">
        <div
          class="messagelist kh"
          v-for="(item, index) in messageList1"
          :key="index"
        >
          {{ item.msg }}
        </div>
        <el-input class="inputMsg" type="text" v-model="message1"></el-input>
      </div>
      <div class="button" @click="clientSendMessage">send</div>
    </div>
  </div>
</template>

<script>
//引入socket.io-client
import io from "socket.io-client";
export default {
  components: {},
  data() {
    return {
      clientSocket: null,
      message1: "",
      messageList1: [],
    };
  },
  mounted() {
    this.createClient();
  },
  methods: {
    createClient() {
      // 创建客户端链接
      this.clientSocket = io("ws://172.21.2.69:8099"); // 连接服务器
      this.clientSocket.on("connect", () => {
        console.log("连接成功客户端");
      });
      //连接好服务器之后就要侦听一个事件 当服务器通过这个事件向你发送数据的时候这里就会调用
      this.clientSocket.on("fromClient", (data) => {
        this.messageList1.push({
          id: 2,
          msg: data,
        });
      });
  
    },
    //这里就是我们想服务器发送数据用的方法
    clientSendMessage() {
      this.clientSocket.emit("sendClient", this.message1); // 向服务器发送消息
      this.messageList1.push({
        id: 1,
        msg: this.message1,
      });
      this.message1 = ""; // 清空输入框
    },

  },
  destroyed() {
    this.clientSocket.disconnect(); // 断开与服务器的连接
  },
};
</script>
<style lang="scss">
.box {
  border: 1px solid red;
  height: 600px;
  width: 400px;
  .content {
    border: 1px solid black;
    height: 560px;
    width: 400px;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 40px;
    .fw {
      text-align: left;
    }
    .kh {
      text-align: right;
    }
    .inputMsg {
      height: 40px;
      position: absolute;
      bottom: 0px;
      left: 0px;
    }
  }

  .button {
    background: #ddd;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
</style>

服务的我是用node 简单搭建了一个不做专业参考（我也不是专业搞这个的）

//app.js里面
//首先创建我们的app
var app = express();

//让app侦听一个端口 就是我们服务端调用的接口 io("ws://172.21.2.69:8099"); // 连接服务器
server = app.listen(8099)
//允许我吗的这个调用跨域
var io = require('socket.io')(server, { cors: true });

//实时通讯的连接 io.on就是创建链接工具
io.on("connection", function (socket) {
   //socket.on就是使用工具创建一个链接事务 sendClient就是名字侦听这个sendClient名字的请求
//服务的写的this.clientSocket.emit("sendClient", this.message1); 这里就是接受他的
  socket.on('sendClient', function (data) {
    console.log(data);
    let msg = {
      code: 200,
      msg:'你刚才发的是'+data,
    }
    //这里就是向服务端发送数据   this.clientSocket.on("fromClient")就是接收他的
    socket.emit('fromClient',msg);
  })

  
})

module.exports = app;