|
@@ -0,0 +1,192 @@
|
|
1
|
+<p align="center">
|
|
2
|
+ <a href="https://github.com/MetinSeylan/Vue-Socket.io" target="_blank">
|
|
3
|
+ <img width="250" src="https://raw.githubusercontent.com/MetinSeylan/Vue-Socket.io/master/docs/logo.png">
|
|
4
|
+ </a>
|
|
5
|
+</p>
|
|
6
|
+
|
|
7
|
+<p align="center">
|
|
8
|
+ <a href="https://www.npmjs.com/package/vue-socket.io"><img src="https://img.shields.io/npm/v/vue-socket.io.svg"/> <img src="https://img.shields.io/npm/dt/vue-socket.io.svg"/></a>
|
|
9
|
+ <a href="https://github.com/vuejs/awesome-vue"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"/></a>
|
|
10
|
+ <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.x-brightgreen.svg"/></a>
|
|
11
|
+ <a href="http://packagequality.com/#?package=vue-socket.io"><img src="http://npm.packagequality.com/shield/vue-socket.io.svg"/></a>
|
|
12
|
+ <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
|
|
13
|
+ <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
|
|
14
|
+</p>
|
|
15
|
+<p align="center">
|
|
16
|
+<a href="https://www.patreon.com/MetinSeylan">
|
|
17
|
+ <img alt="Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="50" />
|
|
18
|
+</a>
|
|
19
|
+</p>
|
|
20
|
+<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
|
|
21
|
+
|
|
22
|
+###### Demo
|
|
23
|
+- <a href="http://metinseylan.com/vuesocketio/" target="_blank">Chat Application</a>
|
|
24
|
+- <a href="http://metinseylan.com" target="_blank">Car Tracking Application</a>
|
|
25
|
+
|
|
26
|
+<p>
|
|
27
|
+are you looking for old documentation? <a href="https://github.com/MetinSeylan/Vue-Socket.io/blob/master/docs/OLD_README.md">it's here</a>
|
|
28
|
+</p>
|
|
29
|
+
|
|
30
|
+#### 🚀 Installation
|
|
31
|
+``` bash
|
|
32
|
+npm install vue-socket.io --save
|
|
33
|
+```
|
|
34
|
+##### Using Connection String
|
|
35
|
+``` javascript
|
|
36
|
+import Vue from 'vue'
|
|
37
|
+import store from './store'
|
|
38
|
+import App from './App.vue'
|
|
39
|
+import VueSocketIO from 'vue-socket.io'
|
|
40
|
+
|
|
41
|
+Vue.use(new VueSocketIO({
|
|
42
|
+ debug: true,
|
|
43
|
+ connection: 'http://metinseylan.com:1992',
|
|
44
|
+ vuex: {
|
|
45
|
+ store,
|
|
46
|
+ actionPrefix: 'SOCKET_',
|
|
47
|
+ mutationPrefix: 'SOCKET_'
|
|
48
|
+ },
|
|
49
|
+ options: { path: "/my-app/" } //Optional options
|
|
50
|
+}))
|
|
51
|
+
|
|
52
|
+new Vue({
|
|
53
|
+ router,
|
|
54
|
+ store,
|
|
55
|
+ render: h => h(App)
|
|
56
|
+}).$mount('#app')
|
|
57
|
+```
|
|
58
|
+
|
|
59
|
+##### Using socket.io-client Instance
|
|
60
|
+``` javascript
|
|
61
|
+import Vue from 'vue'
|
|
62
|
+import store from './store'
|
|
63
|
+import App from './App.vue'
|
|
64
|
+import VueSocketIO from 'vue-socket.io'
|
|
65
|
+import SocketIO from 'socket.io-client'
|
|
66
|
+
|
|
67
|
+const options = { path: '/my-app/' }; //Options object to pass into SocketIO
|
|
68
|
+
|
|
69
|
+Vue.use(new VueSocketIO({
|
|
70
|
+ debug: true,
|
|
71
|
+ connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional
|
|
72
|
+ vuex: {
|
|
73
|
+ store,
|
|
74
|
+ actionPrefix: "SOCKET_",
|
|
75
|
+ mutationPrefix: "SOCKET_"
|
|
76
|
+ }
|
|
77
|
+ })
|
|
78
|
+);
|
|
79
|
+
|
|
80
|
+new Vue({
|
|
81
|
+ router,
|
|
82
|
+ store,
|
|
83
|
+ render: h => h(App)
|
|
84
|
+}).$mount('#app')
|
|
85
|
+```
|
|
86
|
+
|
|
87
|
+**Parameters**|**Type's**|**Default**|**Required**|**Description**
|
|
88
|
+-----|-----|-----|-----|-----
|
|
89
|
+debug|Boolean|`false`|Optional|Enable logging for debug
|
|
90
|
+connection|String/Socket.io-client|`null`|Required|Websocket server url or socket.io-client instance
|
|
91
|
+vuex.store|Vuex|`null`|Optional|Vuex store instance
|
|
92
|
+vuex.actionPrefix|String|`null`|Optional|Prefix for emitting server side vuex actions
|
|
93
|
+vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex mutations
|
|
94
|
+
|
|
95
|
+#### 🌈 Component Level Usage
|
|
96
|
+
|
|
97
|
+<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component, and every function will start to listen events, depends on object key</p>
|
|
98
|
+
|
|
99
|
+``` javascript
|
|
100
|
+new Vue({
|
|
101
|
+ sockets: {
|
|
102
|
+ connect: function () {
|
|
103
|
+ console.log('socket connected')
|
|
104
|
+ },
|
|
105
|
+ customEmit: function (data) {
|
|
106
|
+ console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
|
|
107
|
+ }
|
|
108
|
+ },
|
|
109
|
+ methods: {
|
|
110
|
+ clickButton: function (data) {
|
|
111
|
+ // $socket is socket.io-client instance
|
|
112
|
+ this.$socket.emit('emit_method', data)
|
|
113
|
+ }
|
|
114
|
+ }
|
|
115
|
+})
|
|
116
|
+```
|
|
117
|
+
|
|
118
|
+##### Dynamic Listeners
|
|
119
|
+
|
|
120
|
+<p>If you need consuming events dynamically in runtime, you can use `subscribe` and `unsubscribe` methods in Vue component</p>
|
|
121
|
+
|
|
122
|
+``` javascript
|
|
123
|
+this.sockets.subscribe('EVENT_NAME', (data) => {
|
|
124
|
+ this.msg = data.message;
|
|
125
|
+});
|
|
126
|
+
|
|
127
|
+this.sockets.unsubscribe('EVENT_NAME');
|
|
128
|
+```
|
|
129
|
+
|
|
130
|
+##### Defining handlers for events with special characters
|
|
131
|
+
|
|
132
|
+<p>If you want to handle 'kebab-case', or "event with space inside it" events, then you have to define it via the following way</p>
|
|
133
|
+
|
|
134
|
+``` javascript
|
|
135
|
+export default {
|
|
136
|
+ name: 'Test',
|
|
137
|
+ sockets: {
|
|
138
|
+ connect: function () {
|
|
139
|
+ console.log('socket to notification channel connected')
|
|
140
|
+ },
|
|
141
|
+ },
|
|
142
|
+
|
|
143
|
+ data () {
|
|
144
|
+ return {
|
|
145
|
+ something: [
|
|
146
|
+ // ... something here for the data if you need.
|
|
147
|
+ ]
|
|
148
|
+ }
|
|
149
|
+ },
|
|
150
|
+
|
|
151
|
+ mounted () {
|
|
152
|
+ this.$socket.subscribe("kebab-case", function(data) {
|
|
153
|
+ console.log("This event was fired by eg. sio.emit('kebab-case')", data)
|
|
154
|
+ })
|
|
155
|
+ }
|
|
156
|
+}
|
|
157
|
+```
|
|
158
|
+
|
|
159
|
+#### 🏆 Vuex Integration
|
|
160
|
+<p>When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`</p>
|
|
161
|
+
|
|
162
|
+``` javascript
|
|
163
|
+import Vue from 'vue'
|
|
164
|
+import Vuex from 'vuex'
|
|
165
|
+
|
|
166
|
+Vue.use(Vuex)
|
|
167
|
+
|
|
168
|
+export default new Vuex.Store({
|
|
169
|
+ state: {},
|
|
170
|
+ mutations: {
|
|
171
|
+ "<MUTATION_PREFIX><EVENT_NAME>"() {
|
|
172
|
+ // do something
|
|
173
|
+ }
|
|
174
|
+ },
|
|
175
|
+ actions: {
|
|
176
|
+ "<ACTION_PREFIX><EVENT_NAME>"() {
|
|
177
|
+ // do something
|
|
178
|
+ }
|
|
179
|
+ }
|
|
180
|
+})
|
|
181
|
+```
|
|
182
|
+
|
|
183
|
+## Stargazers over time
|
|
184
|
+
|
|
185
|
+[](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+<p align="center">
|
|
189
|
+ <a href="https://github.com/MetinSeylan/Vue-Socket.io" target="_blank">
|
|
190
|
+ <img src="https://media.giphy.com/media/11jlnltQgUi2mQ/giphy.gif">
|
|
191
|
+ </a>
|
|
192
|
+</p>
|