node服务

引入需要的库

npm install nodejs-websocket

创建需要的server.js文件

const ws = require("nodejs-websocket");
const server = ws.createServer(function (socket) {
  // 读取字符串消息，事件名称为:text
  var count = 5;
  socket.on("text", function (str) {
    // 在控制台输出前端传来的消息
    console.log(str);
    //向前端广播消息
    server.connections.forEach((conn) => { 						
	conn.sendText(str);
    })
  });
  socket.on("error", () => {
    console.log("err");
  });
});

server.listen(18002, () => {
  console.log("connected...");
});

在app.js中引入server.js

require("./src/server/server.js");

注意：如果用的宝塔，需要宝塔端口放行，同时阿里云的安全组端口也要放开

阿里云

宝塔

前端vue

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
  },
  data() {
    // 这里存放数据
    return {
      websocket: null
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.connectWebsocket()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    connectWebsocket() {
      const that = this
      if (typeof WebSocket === 'undefined') {
        console.log('您的浏览器不支持WebSocket')
        return
      } else {
        const url = 'ws://XX.XX.XX.XX:XXX'
        // 打开一个websocket
        this.websocket = new WebSocket(url)
        // 建立连接
        this.websocket.onopen = () => {
          // 发送数据
          setInterval(() => {
            that.websocket.send('发送数据')
          }, 1000)
        }
        // 客户端接收服务端返回的数据
        this.websocket.onmessage = (evt) => {
          console.log('websocket返回的数据：', evt)
        }
        // 发生错误时
        this.websocket.onerror = (evt) => {
          console.log('websocket错误：', evt)
        }
        // 关闭连接
        this.websocket.onclose = (evt) => {
          console.log('websocket关闭：', evt)
        }
      }
    }
  }
}
</script>