vue中引入socket.io 简单使用

1、服务器中

//index.js
//启动web服务，监听3000端口 绑定socket.io服务，接受websocket连接请求
const http = require('http').createServer();
const express = require('express')
// 创建web服务实例
const socketio = require('socket.io')(http,{
  cors:{
    origin:"http://127.0.0.1:8080",
    methods:['GET','POST']
  }
})

socketio.on('connection',(socket)=>{
  console.log('客户端连接：'+socket.id)
  socket.on('textmsg',(data)=>{
    console.log(socket.id+':'+data)
    socket.emit('textmsg','输出'+data)
  })
})
http.listen(3000,function(){
  console.log('server is running...')
});

2、客户端

<template>
  <div class="home">
    <ul>
      <p>消息：{{ newt }}</p>
    </ul>
    <input type="text" placeholder="在此输入消息" v-model="msg" />
    <button @click="sendMessage()">发送</button>
  </div>
</template>
<script>
import io from "../scripts/socket.io";
var socket = io("ws://localhost:3000/");
export default {
  data() {
    return {
      msg: "",
      newt: "",
    };
  },
  methods: {
    sendMessage() {
      socket.emit("textmsg", this.msg);
      socket.on("textmsg", (data) => {
        console.log(data);
        this.newt = data;
      });
    },
  },
};
</script>

成功获得服务器发过来的请求