Quish

Socket.io -bindings vir Vue.js en Vuex

Blog

Socket.io -bindings vir Vue.js en Vuex

Socket.io -bindings vir Vue.js en Vuex

Vue-Socket.io-Uitgebrei

Socket.io bindings vir Vue.js en Vuex (geïnspireer deur Vue-Socket.io )



Kenmerke

  • Liggewig en afhanklik - slegs 2 kb min gzip
  • Reaktiewe eienskappe | _+_ | en | _+_ |
  • Luister en gee uit | _+_ | gebeure binne komponente
  • Stuur handelinge en mutasies outomaties in verskeie Vuex-modules met 'n ruim ruimte op | _+_ | gebeure
  • Goeie TypeScript -ondersteuning (versierder en tik)
  • Kan gebruik word met enige weergawe van | _+_ |
  • Pasgemaakte opsies - pas die biblioteek aan om beter by u projekbehoeftes te pas
  • ens ...

Ons ondersteun slegs blaaiers met wêreldwye gebruiksstatistieke groter as 1% en laaste 2 weergawe van elke blaaier (maar nie dooie blaaiers nie). Biblioteek werk moontlik ook in 'n ouer blaaier, maar ons waarborg dit nie. Miskien het u addisionele polyfillers nodig om dit te laat werk.



Motivering

Ek het gebruik $socket.connected vir 'n paar maande. Ek het van die idee gehou, maar hoe meer ek dit gebruik het, hoe meer het ek te doen gekry met foute, verouderde dokumentasie, gebrek aan ondersteuning, afwesigheid van toetse en 'n groot aantal probleme. Dit het die ontwikkeling van die produk waarmee ek gewerk het, vertraag. Dus het ek besluit om my eie vurk te skep met al die gewenste dinge (funksies/regstellings/toetse/ondersteuning/CI -tjeks, ens.). Dit is hoe | _+_ | is gebore.

As u wil help - skep 'n probleem of PR. Ek sal bly wees om enige bydrae te sien. Kom ons maak die wêreld 'n beter plek



Voorvereistes

Jy moet hardloop Socket.IO bediener voordat u met enige Vue/Socket.IO -projek begin! Instruksies vir die bou van 'n Node/Socket.IO -bediener word gevind hier .

Sagtewarevereistes

Installasie

socket.io

Inisialisering

socket.io-client

Let wel: jy moet instansie van | _+_ | as tweede argument om duplisering van biblioteek te voorkom. Lees meer hier .

python 3 bedrogblad 2020
Vue-Socket.io

Gebruik

Op Vue.js -komponent

Definieer u luisteraars onder | _+_ | afdeling en hulle sal ooreenstemmende | _+_ | gebeure outomaties.

vue-socket.io-extended

Let op : Moenie pylfunksies vir metodes of luisteraars gebruik as u | _+_ | gebeure binne. U sal uiteindelik verkeerde _ _ _ gebruik. Meer inligting hieroor hier

Skep 'n nuwe luisteraar

>=2.X

Verwyder bestaande luisteraar

>=2.X

| _+_ | en | _+_ | reaktief is. Dit beteken dat u dit in uitdrukkings kan gebruik

>=2.X

Of voorwaardes

npm install vue-socket.io-extended socket.io-client

Of berekende eienskappe, metodes en hake. Behandel dit as berekende eienskappe wat in alle komponente beskikbaar is

Vuex winkelintegrasie

Stel op

Om Vuex -integrasie op te stel, slaag die winkel as die derde argument. In 'n Vue CLI -projek kan u dit doen in die | _+_ | lêer. Voorbeeld:

import VueSocketIOExt from 'vue-socket.io-extended'; import io from 'socket.io-client'; const socket = io('http://socketserver.com:1923'); Vue.use(VueSocketIOExt, socket);
Ontvangs van geleenthede

Mutasies en aksies word outomaties in die Vuex -winkel gestuur of gepleeg wanneer 'n socket -gebeurtenis opdaag. 'N Mutasie of aksie moet die benoemingskonvensie hieronder volg om 'n socket -gebeurtenis te herken en te hanteer.

  • AAN mutasie moet begin met | _+_ | voorvoegsel en gaan voort met 'n hoof weergawe van die gebeurtenis
  • 'N aksie moet begin met | _+_ | voorvoegsel en gaan voort met die camelcase -weergawe van die gebeurtenis
Bedienergeleentheid Mutasie Aksie
socket.io-client var socket = io('http://socketserver.com:1923'); Vue.use(VueSocketIOExt, socket); sockets
socket.io new Vue({ sockets: { connect() { console.log('socket connected') }, customEmit(val) { console.log('this method was fired by the socket server. eg: io.emit('customEmit', data)') } }, methods: { clickButton(val) { // this.$socket.client is `socket.io-client` instance this.$socket.client.emit('emit_method', val); } } }) socket.io
this this.$socket.$subscribe('event_name', payload => { console.log(payload) }); this.$socket.$unsubscribe('event_name');
$socket.connected $socket.diconnected {{ $socket.connected ? 'Connected' : 'Disconnected' }}

Kyk die Konfigurasie afdeling as u 'n pasgemaakte transformasie wil gebruik.

Kyk die Migrasie vanaf VueSocketIO afdeling as u aksiename in UPPER_CASE wil behou.

You are disconnected
Uitstuur van gebeure

Gebeurtenisse kan gestuur word na die Socket.IO bediener deur te bel | _+_ | van 'n Vuex -mutasie of -aksie. Mutasie- of aksiename is nie onderworpe aan dieselfde naamvereistes as hierbo nie. Meer as een argument kan ingesluit word. Alle seriële datastrukture word ondersteun , insluitend buffer.

src/main.js
Vuex -modules op naam

Modules op naams word out-of-the-box ondersteun. Enige mutasie of aksie met die regte naam moet werk, ongeag of dit in 'n module of in die hoof Vuex-winkel is.

import VueSocketIOExt from 'vue-socket.io-extended'; import io from 'socket.io-client'; import store from './store' const socket = io('http://socketserver.com:1923'); Vue.use(VueSocketIOExt, socket, { store });

Bogenoemde kode sal:

  • Pleeg die | _+_ | mutasie in die | _+_ | module
  • Pleeg die | _+_ | mutasie in die | _+_ | module
  • Stuur die | _+_ | aksie in die | _+_ | module

ECMAScript / TypeScript -versierder (bygevoeg in v4)

Vereis : ECMAScript stadium 1 versierders . As u Babel gebruik, babel-plugin-transform-decorators-legacy word benodig. As u TypeScript gebruik, aktiveer | _+_ | vlag.

wat is mbtc bitcoin

Dit ondersteun nog nie die fase 2 -versierders nie, aangesien hoofstroom -transpilers nog steeds na die ou versierders oorgedra word.

Ons bied | _+_ | versierder vir gebruikers van klas-styl Vue-komponente . By verstek, | _+_ | versierder luister na dieselfde gebeurtenis as versierde metode naam, maar u kan persoonlike naam gebruik deur 'n tou binne -in versierder te plaas, bv. | _+_ |.

Kyk na die voorbeeld hieronder:

SOCKET_

Gebruik met Nuxt.js

Die belangrikste punt hier is om SSR vir die inprop uit te skakel, aangesien dit andersins sal neerstort. Dit is 'n welbekende probleem en ons gaan dit regstel. Dankie Antwoord op @The_Gamer vir ondersoek.

hoe om 'n webwerf te skep met behulp van javascript

1. Skep inprop :

socket_

2. Registreer dit dan :

chat message

Gebruik met Quasar Framework

Registreer vue-socket.io-uitgebrei met 'n opstartlêer en skakel die weergawe van die bediener uit

1. Skep bootlêer :

SOCKET_CHAT MESSAGE

2. Registreer dit dan :

socket_chatMessage

Konfigurasie

Benewens winkelvoorkeure, | _+_ | aanvaar ander opsies. Hier is hulle:

Opsie Tik Verstek Beskrywing
chat_message SOCKET_CHAT_MESSAGE socket_chatMessage Vuex -winkel -instansie maak vuex -integrasie moontlik
chatMessage SOCKET_CHATMESSAGE socket_chatMessage Maak vooraf by die gebeurtenisnaam terwyl u die gebeurtenis in aksie omskakel. Leë string deaktiveer voorvoegsel
CHAT_MESSAGE SOCKET_CHAT_MESSAGE socket_chatMessage Gebruik die gebeurtenisnaam terwyl u die gebeurtenis na mutasie omskakel. Leë string deaktiveer voorvoegsel
// In this example we have a socket.io server that sends message ID when it arrives // so to get entire body of the message we need to make AJAX call the server import Vue from 'vue' import Vuex from 'vuex' // `MessagesAPI.downloadMessageById` is an async function (goes to backend through REST Api and fetches all message data) import MessagesAPI from './api/message' Vue.use(Vuex); export default new Vuex.Store({ state: { // we store messages as a dictionary for easier access and interaction // @see https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5 messages: {}, messagesOrder: [] }, mutations: { NEW_MESSAGE(state, message) { state.messages[message.id] = message; state.messagesOrder.push(message.id); } }, actions: { socket_userMessage ({ dispatch, commit }, messageId) { // { commit('NEW_MESSAGE', message); }) } } }) this._vm.$socket.client.emit actions: { emitSocketEvent(data) { this._vm.$socket.client.emit('eventName', data); this._vm.$socket.client.emit('with-binary', 1, '2', { 3: '4', 5: new Buffer(6) }); } } hooffunksie Bepaal hoe gebeurtenisnaam na mutasie omgeskakel word
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const messages = { state: { messages: [] }, mutations: { SOCKET_CHAT_MESSAGE(state, message) { state.messages.push(message); } }, actions: { socket_chatMessage() { console.log('this action will be called'); } }, }; const notifications = { state: { notifications: [] }, mutations: { SOCKET_CHAT_MESSAGE(state, message) { state.notifications.push({ type: 'message', payload: message }); } }, }; export default new Vuex.Store({ modules: { messages, notifications, } }) SOCKET_CHAT_MESSAGE messages kameelkas funksie Bepaal hoe gebeurtenisnaam na aksie omgeskakel word

FYI: U het altyd toegang tot die standaard plugin-opsies as u dit nodig het (bv. Hergebruik standaard | _+_ | funksie):

SOCKET_CHAT_MESSAGE

Migrasie vanaf VueSocketIO

Vir almal wat van die ou pakket VueSocketIO na die nuwe pakket oor die bestaande projek gemigreer het. U moet twee parameters herdefinieer, sodat u ou winkelhandelingname soos SOCKET_EVENT_NAME kan gebruik.

notification

FAQ

Beleid oor semantiese weergawe

Hierdie inprop volg semantiese weergawe .

Wysigingslys

Ons gebruik GitHub vrystellings .

Bydrae

Ons is meer as bly om moontlike bydraes te sien, so moet asseblief nie huiwer nie. As u voorstelle, idees of probleme het, kan u dit nuut byvoeg uitgawe , maar maak eers seker dat u vraag nie die vorige vrae herhaal nie.

sql onderhoudsvrae facebook

Aflaai besonderhede:

Skrywer: probleem

Regstreekse demonstrasie: https://codesandbox.io/s/oxqpm54pnq?fontsize=14&module=/src/App.vue

GitHub: https://github.com/probil/vue-socket.io-extended

#vuejs #vue #javascript #vue-js

Gewilde Poste

Interessante Artikels

Editor'S Choice