probil / vue-socket.io-extended

:v::zap: Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io)
MIT License
628 stars 38 forks source link

provide useSocket() function #520

Open e-tobi opened 3 years ago

e-tobi commented 3 years ago

This can be used in Vue's setup() function to inject the socket instance where $socket is not available:

setup() { const socket = useSocket() }

Currently this breaks some tests - I will look into this later.

codecov[bot] commented 3 years ago

Codecov Report

Merging #520 (5ccd96f) into alpha (df83685) will not change coverage. The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff            @@
##             alpha      #520   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            9        10    +1     
  Lines          124       131    +7     
  Branches        20        20           
=========================================
+ Hits           124       131    +7     
Impacted Files Coverage Δ
src/composables.js 100.00% <100.00%> (ø)
src/plugin.js 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update df83685...5ccd96f. Read the comment docs.

e-tobi commented 3 years ago

I'm going to add another composable:

setup() {
  onSocketEvent("my-event', (data) => {
     ...
  }
}

...so you might want to wait before pulling

e-tobi commented 3 years ago

onSocketEvent() is now working too and I have also added this to the README.md.

probil commented 3 years ago

Wow! That looks nice. 👍 Will check it on weekend and merge

FYI I am thinking about sunsetting the $subscribe/$unsubscribe API in v5 in favour of directly socket usage. The main reason for this is the fact that it's not working properly with options api after component mount/unmount anyway #431 It will probably be available internally so your approach will definitely work but the mention of $subscribe/$unsubscribe in docs might be redundant. Thanks anyway!

BTW, you don't have to commit dist folder - it's supposed to be generated by CI later in the process

e-tobi commented 3 years ago

Sorry, missed that dist slipped in with the last commit. I've fixed it. Might be a good idea to add dist to .gitignore.

e-tobi commented 3 years ago

Ok - I've added dist to .gitignore so I can't make the same mistake again.

e-tobi commented 3 years ago

Mmm... it still doesn't work like it should. In my little toy project unsubscribing fails, because removeListenersByLabel doesn't detect the unsubscribe coming from the same vm as the subscribe. I'll try to sort this out tomorrow.

probil commented 3 years ago

@e-tobi Any updates on this? I'll try to take a look at removeListenersByLabel maybe there is some internal changes in Vue 3

BTW thanks for spotting dist/ missing in .gitignore. I thought it was there. Backported to the master branch.

alew3 commented 3 years ago

@e-tobi what's the best way for me to try out your PR? I can't find it in the 5.0.0-alpha.4

sQuarecoW commented 2 years ago

Is there any movement on this?