063 - Socket Mixin 만들기

src/main.js

@@ -8,7 +8,8 @@ import plugins from './plugins';
 import '@babel/polyfill'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@mdi/font/css/materialdesignicons.css'
-import titleMixin from './mixins/title-mixin';
+
+import Mixins from './mixins';
 
 Vue.config.productionTip = false
 
@@ -17,7 +18,12 @@ export function createApp(ctx) {
 	const store = createStore();
 	sync(store, router);
 
-	Vue.mixin(titleMixin);
+	const mixins = Object.keys(Mixins);
+	for (const mixin of mixins) {
+		if(Mixins[mixin]) {
+			Vue.mixin(Mixins[mixin]);
+		}
+	}
 
 	const app = new Vue({
 		data: { url: ctx ? ctx.url : '' },

src/mixins/index.js

@@ -0,0 +1,14 @@
+import camelCase from "lodash/camelCase";
+
+const requireModule = require.context('.', false, /\.js$/);
+const modules = {};
+
+requireModule.keys().forEach(filename => {
+	if(filename !== './index.js') {
+		const moduleName = camelCase(filename.replace(/(\.\/|\.js)/g, ''));
+		modules[moduleName] = requireModule(filename).default;
+	}
+});
+// console.log(Object.keys(modules));
+
+export default modules;

src/mixins/socket-mixin.js

@@ -0,0 +1,32 @@
+function getMixin(vm) {
+	const {socket} = vm.$options;
+	if(socket) {
+		return typeof socket === 'function' ? socket.call(vm) : socket;
+	}
+}
+
+const serverMixin = null;
+
+const clientMixin = {
+	data() {
+		return {
+			socketEvents : [],
+		}
+	},
+	mounted() {
+		const socket = getMixin(this);
+		if(socket) {
+			this.socketEvents = Object.keys(socket);
+			for(const ev of this.socketEvents) {
+				this.$socket.on(ev, socket[ev])
+			}
+		}
+	},
+	destroyed() {
+		for(const ev of this.socketEvents) {
+			this.$socket.off(ev)
+		}
+	}
+}
+
+export default process.env.VUE_ENV === 'server' ? serverMixin : clientMixin;

src/views/Home.vue

@@ -48,13 +48,12 @@ export default {
   title() {
     return this.title;
   },
-  mounted() {
-    this.$socket.on("room:testmsg", (data) => {
-      console.log("room:testmsg", data);
-    });
-  },
-  destroyed() {
-    this.$socket.off("room:testmsg");
+  socket() {
+    return {
+      "room:testmsg": (data) => {
+        console.log("room:testmsg", data);
+      },
+    };
   },
   methods: {
     toastTest1() {