Vue Socket.io 소스 코드에 대한 자세한 분석

이 글에서는 주로 Vue Socket.io 소스 코드의 해석을 소개하고 참고 자료를 제공합니다.

Background

올해 12월부터 재건축을 시작한 프로젝트가 있는데, 그 프로젝트에는 소켓이 포함되어 있습니다. 하지만 소켓은 이전 개발자가 패키징한 패키지를 사용합니다(현재 회원들은 수천 번 강화된 휠을 사용하지 않는 이유에 대해 불평했습니다). 따라서 이러한 리팩토링 기회를 활용하여 vue-socket.io가 도입되었으며, 소켓.io가 백엔드로 사용됩니다. 저도 궁금해서 vue-socket.io 소스코드를 살펴봤습니다(이 라이브러리의 문서가 너무 짧아서 그렇다고는 말하지 않겠습니다. 안정성을 위해 어떻게 사용하는지 이해하기 위해 소스코드만 살펴보았습니다. )

Start

파일 Architecture

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);

이 라이브러리는 일반적으로 다음 코드(위 그림 2)와 같이 작성됩니다. 위 그림 1의 연결과 저장은 각각 그림 2의 마지막 두 매개변수입니다. 이는 각각 소켓 연결의 URL과 vuex의 저장소를 의미합니다. 그림 1은 이 두 매개변수를 Observer에 전달하고, 새로운 관찰자 객체를 생성한 다음, 관찰자 ​​객체의 소켓 속성을 Vue 프로토타입에 마운트하는 것입니다. 그런 다음 Vue 인스턴스

//에서 this.$sockets.emit('xxx', {})를 직접 수행할 수 있습니다.

위 내용은 Vue Socket.io 소스 코드에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!