Некоторый опыт и записи об использовании vue-socket.io в vue

Vue.js

предисловие

Используется в проекте vuesocketДлинное соединение, которое всегда использовалось раньшеvue-socke.io[гитхаб-адрес], но в последнее время при его использовании возникали какие-то необъяснимые баги, и я из-за этого потерял много волос, и, наконец, решил это. оsocketВведение связанного контента и сценарии использования, я не буду делать здесь слишком много введения (в основном лень), вы можете прочитать другие статьи. В этой статье в основном рассказывается, как его использовать и на что следует обратить внимание при повторном использовании. Что касается кода, использованного в статье, я поставилgithubадрес. Птица фронтенда, поклявшаяся стать новичком во фронтенде, оставила сообщение, в котором указывала, что мальчик благодарен.

Установить

Здесь мы устанавливаемvue.socket.ioмодули иsocket.io-clientмодуль или нетsocket.io-clientмодуль, см. ниже.

cnpm i vue-socket.io -S
cnpm i socket.io-client -S

yarn vue-socket.io
yarn i socket.io-client

использование vue-клиента

  • использоватьsocket.io-clientсоединять
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueSocketIO from 'vue-socket.io'
import SocketIO from "socket.io-client"

Vue.config.productionTip = false

// socket 连接参数
const socketOptions = {
  autoConnect: false,       // 自动连接     这里为我项目需求  需要在指定情况下才连接socket
}

// 注册
Vue.use(
  new VueSocketIO({
    debug: true ,   // debug调试，生产建议关闭
    connection: SocketIO("127.0.0.1:1024", socketOptions),
    store,          // 如果没有使用到store可以不用写
  })
)


new Vue({
  // 这里为全局监听socket事件消息，监听函数这里只写了一点，其实很有很多事件。
  sockets: {
    connecting() {
      console.log('正在连接')
    },
    disconnect() {
      console.log("Socket 断开");
    },
    connect_failed() {
      cosnole.log('连接失败')
    },
    connect() {
      console.log('socket connected')
    }
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app')

  • Конкатенация строк

    Если он используется нормально, сокет подключается к проекту при его запуске, и его не нужно загружать.socket.io-clientмодуль, используйте его напрямую.

// 注册
Vue.use(
  new VueSocketIO({
    debug: true ,   // debug调试，生产建议关闭
    connection: 127.0.0.1:1024,
    store,          // 如果没有使用到store可以不用写
  })
)
  • используемые компоненты

<template>
  <div id="app">
    <div id="nav">
      <button @click="connect">连接socket</button>
      <button @click="sendMessage">发送数据</button>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {

    }
  },

  methods:{

    // 连接socket
    connect() {

      this.$socket.open()       // 开始连接socket
     
      // 订阅事件
      this.sockets.subscribe('welcome', data => {
        console.log('welcome data ', data)
      }) 
      
    },

    // 发送消息
    sendMessage() {
      
      this.$socket.emit('hello', '这里是客户端')

    }



  },

  sockets:{
    // 
    welcome: data => {
      console.log('welcome data ', data)
    }

  }
}
</script>

Сводка по использованию клиента

У клиента есть собственное событие мониторинга

  • подключение: подключение успешно
  • подключение: подключение
  • отключить: отключить
  • connect_failed: соединение не удалось
  • error: Произошла ошибка, которая не может быть обработана другими типами событий.
  • reconnect_failed: ошибка повторного подключения
  • повторное подключение: успешное повторное подключение
  • повторное подключение: повторное подключение

Прослушивание пользовательских событий

  • глобальный мониторинг
sockets:{
    welcome: data => {
        console.log('welcome data', data)
    }
}
  • Слушатель внутри компонента
this.sockets.subscribe('welcome', data => {
    console.log('welcome', data)
})

отправлять сообщения

Уведомление: используется мониторthis.sockets, отправляющее сообщениеthis.$socket, не путайте.

this.$socket.emit('hello', '这里是客户端')

О междоменных проблемах

Будут междоменные проблемы с сокетами.Я читал статью ранее и говорил, что вvue.config.jsКонфигурация прокси-сервера в середине почти такая же, как конфигурация прокси-сервера фонового интерфейса, но я пробовал ее, и она кажется бесполезной.Если есть учащиеся, которые знают, пожалуйста, оставьте сообщение и скажите мне, решение в реальном проекте это междоменная проблема внутренней конфигурации.

использование сервера

Причина, по которой мы говорим об использовании сервера здесь, заключается главным образом в том, чтобы позволить учащимся лучше использовать сокеты, а во-вторых, чтобы вывести следующие ошибки.. Это также расширение знаний. Вы чувствуете, что заслужили это? Локальное открытие службы сокетов может быть лучше для отладки. Сервер в основном используетnode, ведь мы не знаем java, python.... Вот и настройте сокет междоменный.

/*
 * @Descripttion: 
 * @version: 
 * @Author: fanliu
 * @Date: 2020-06-19 18:22
 * @LastEditors: fanliu
 * @LastEditTime: 2020-06-19 18:30
 */

var http = require('http');
var io = require('socket.io');

// 创建server服务
var server = http.createServer(function (req, res) {

  var headers = {};
  headers["Access-Control-Allow-Origin"] = "*";
  headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS";
  headers["Access-Control-Allow-Credentials"] = true;
  headers["Access-Control-Max-Age"] = '86400'; // 24 hours
  headers["Access-Control-Allow-Headers"] = "X-Requested-With, Access-Control-Allow-Origin, X-HTTP-Method-Override, Content-Type, Authorization, Accept";
  res.writeHead(200, headers);
  res.end();
});

// 启动服务器  监听 1024 端口
server.listen(1024,function() {
	console.log('server runing at 127.0.0.1:1024')
})

// 启动socket服务
var socket = io.listen(server, {origins: '*:*'});

// 监听客户端连接
socket.on('connection',function(socket) {
	console.log('客户端有连接')
	
	// 监听客户端断开
	socket.on('disconnect', () => {
		console.log('客户端断开')
	})
	
	// 给客户端发送消息
	socket.emit('welcome','欢迎连接socket')
    
        // 监听客户端消息
        socket.on('hello', data => {
        	console.log('接收客户端发送数据', data)
        })

});

Сводка на стороне сервера

Сервер получает и отправляет сообщения, а клиент меняется местами., клиентemitОтправить сообщение, то сервер нужен здесьonСлушайте сообщения, отправленные клиентом, и то же самое верно для отправки услуг.

Ступай на яму

Не забудьте отменить событие подписки

Сокет в основном используется для написания чатов.После присоединения к сокет-комнате вам необходимо подписаться на весь контент чата в комнате.В это время, если вы не отмените предыдущее событие подписки, при следующем входе вы будет подписываться на сообщения несколько раз. То есть, когда кто-то другой отправляет только одно сообщение, здесь вы получаете два или даже больше. Как я могу отменить подписку?Мой метод обработки заключается в автоматической отмене всех предыдущих событий подписки после выхода из текущей страницы чата.

    beforeDestroy() {
        this.sockets.unsubscribe(eventName)
    }

Точно так же, если есть указанная страница для присоединения к комнате сокетов, не забудьте закрыть соединение сокета при выходе со страницы. как тыcreatedНачните подключать розетку вbeforeDestroyНе забудьте закрыть сокет, иначе сокет будет подключен при следующем входе.

created() {
    this.$socket.open()
    // 查看socket是否连接成功
    this.$socket.connected
}
beforeDestroy() {
    this.$socket.close()
}

Type Error: this.sockets.subscribe is not a function

Это проблема, с которой я столкнулся недавно.Я изначально думал, что проблема с моим this pointing, а затем я проверил всю логику этого с конца и обнаружил, что это не проблема.

печатьthis.socketsПосле этого я нашел проблему

subscribeСобытие подписки не существует напрямую, а является свойством объекта, поэтому я попробовалthis.sockets.listenner.subscribeНашел работу.

Вы думали, что это закончилось? ? ? Затем я снова нашел проблему

  sockets:{

    welcome: data => {
      console.log('welcome data ', data)
    }

  }

И в событии с подпиской журнал сокетов показываетcomponent: undefinedне вижу данных

Событие глобальной подписки не вступает в силу, а событие подключения, которое идет с сокетом, не начинает печатать. Я был просто тупой 😢, у меня не было этих проблем, когда я им раньше пользовался.После множества неудачных байду, я стал просить помощи у официалов. Так нашел проблему.Vue-Socket.io: #connect subscribe, component: undefined

Общий смысл в том, что проблема в версии 3.0.9, и эту проблему можно решить после версии. Вот почему я написал в нем сервер сокетов. После того, как я написал небольшое локальное демо, это действительно была проблема с версией, а затем появилась эта статья.

Суммировать

Студенты должны обратить внимание на версию при использовании vue-socket.io, текущую3.0.9Проблем будет больше или меньше, выбирать вам3.0.7Версия. Это можно посмотреть с помощью моего тестового демо в начале статьи, код службы сокетов тоже есть в проекте. Я впервые публикую статью в Nuggets. Прошу простить меня за возможные ошибки. В будущем я опубликую больше технических статей по фронтенду, поэтому, пожалуйста, уделяйте больше внимания.

Категории