Vue Socket.io 소스 코드 해독
올해 12 월 재 구성 을 시작 한 프로젝트 가 socket 과 관련 이 있 습 니 다.하지만 socket 은 이전 개발 자 에 의 해 봉 인 된 가방 을 사용 합 니 다.따라서 이 재 구성 기 회 를 틈 타 vue-socket.io 를 도입 하고 백 엔 드 는 socket.io 를 사용 합 니 다.저도 궁금 해서 vue-socket.io 의 소스 코드 를 봤 어 요.
시작 하 다
파일 구조
우 리 는 주로 src 아래 의 세 개의 파일 을 보 았 는데,이 라 이브 러 리 는 관찰자 모드 를 사 용 했 음 을 알 수 있다.
Main.js
// observe ， Observer.js
let observer = new Observer(connection, store)
// socket vue ,
// vue this.$socket.emit('xxx', {})
Vue.prototype.$socket = observer.Socket;
import store from './yourstore'
Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
// 👇 vue
Vue.mixin({
created(){
let sockets = this.$options['sockets']
this.$options.sockets = new Proxy({}, {
set: (target, key, value) => {
Emitter.addListener(key, value, this)
target[key] = value
return true;
},
deleteProperty: (target, key) => {
Emitter.removeListener(key, this.$options.sockets[key], this)
delete target.key;
return true
}
})
if(sockets){
Object.keys(sockets).forEach((key) => {
this.$options.sockets[key] = sockets[key];
});
}
},
/**
* beforeDestroy ， created socket ，
* delete this.$option.sockets ，
*/
beforeDestroy(){
let sockets = this.$options['sockets']
if(sockets){
Object.keys(sockets).forEach((key) => {
delete this.$options.sockets[key]
});
}
}
var vm = new Vue({
sockets:{
connect: function(){
console.log('socket connected')
},
customEmit: function(val){
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
}
},
methods: {
clickButton: function(val){
// $socket is socket.io-client instance
this.$socket.emit('emit_method', val);
}
}
})
Emitter.js 는 주로 Emitter 대상 을 썼 는데 이 대상 은 세 가지 방법 을 제공 했다.
addListener
addListener(label, callback, vm) {
//
if(typeof callback == 'function'){
// ， map
// ， ，
// ，
this.listeners.has(label) || this.listeners.set(label, []);
this.listeners.get(label).push({callback: callback, vm: vm});
return true
}
return false
}removeListener
if (listeners && listeners.length) {
index = listeners.reduce((i, listener, index) => {
return (typeof listener.callback == 'function' && listener.callback === callback && listener.vm == vm) ?
i = index :
i;
}, -1);
if (index > -1) {
listeners.splice(index, 1);
this.listeners.set(label, listeners);
return true;
}
}
return false;
emit
if (listeners && listeners.length) {
listeners.forEach((listener) => {
listener.callback.call(listener.vm,...args)
});
return true;
}
return false;Observer.js
constructor(connection, store) {
// ， connection
// socket ， url
if(typeof connection == 'string'){
this.Socket = Socket(connection);
}else{
this.Socket = connection
}
// vuex store store mutations actions
// oberver
if(store) this.store = store;
// ， ！
this.onEvent()
}
onEvent(){
// ，packet.data
// ，
// emit
// vuex store， passToStore， passToStore
var super_onevent = this.Socket.onevent;
this.Socket.onevent = (packet) => {
super_onevent.call(this.Socket, packet);
Emitter.emit(packet.data[0], packet.data[1]);
if(this.store) this.passToStore('SOCKET_'+packet.data[0], [ ...packet.data.slice(1)])
};
// ， ， ？
// this
// ， ， this
let _this = this;
["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed", "connect_error", "connect_timeout", "connecting", "ping", "pong"]
.forEach((value) => {
_this.Socket.on(value, (data) => {
Emitter.emit(value, data);
if(_this.store) _this.passToStore('SOCKET_'+value, data)
})
})
}
passToStore(event, payload){
// SOCKET_
if(!event.startsWith('SOCKET_')) return
// vuex store mutations
for(let namespaced in this.store._mutations) {
// ， store module namespaced ， mutation xxx/
// mutation
let mutation = namespaced.split('/').pop()
// ， commit mutation
// ，mutation SOCKET_
if(mutation === event.toUpperCase()) this.store.commit(namespaced, payload)
}
//
for(let namespaced in this.store._actions) {
let action = namespaced.split('/').pop()
// action socket_
if(!action.startsWith('socket_')) continue
//
let camelcased = 'socket_'+event
.replace('SOCKET_', '')
.replace(/^([A-Z])|[\W\s_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase())
// action ， action
if(action === camelcased) this.store.dispatch(namespaced, payload)
}
}
마지막.
우선,이 소스 코드 는 좀 간단 하지 않 습 니까?하하 하,하지만 도움 을 줄 수 있어 서 저도 좋 은 것 같 습 니 다.
그리고 위 에 제 가 말 한 것 이 맞다 면 여기 로 오 세 요issue아니면 직접 댓 글 을 달 아 주세요.
마지막
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
