WebSockets от компонента Vue до flask - не удается подключиться к серверу - PullRequest
Новая
       72

WebSockets от компонента Vue до flask - не удается подключиться к серверу

0 голосов
/ 08 мая 2020

Я делаю первые шаги с веб-сокетами в своем приложении. Мой интерфейс использует vue. js, в то время как мой сервер использует flask.

В моем компоненте я написал это. 

  created() {
    console.log('Starting connection to WebSocket Server');
    // this.connection = new WebSocket('wss://echo.websocket.org');
    this.connection = new WebSocket('wss://192.168.0.22:5000');

    this.connection.onmessage = function (event) {
      console.log(event);
    };

    this.connection.onopen = function (event) {
      console.log(event);
      console.log('Successfully connected to the echo websocket server...');
    };
  },

В моем flask app.py кроме другие вещи у меня есть это 

app = Flask(__name__)
socketio = SocketIO(app)
CORS(app)

"""Socket.IO decorator to create a websocket event handler"""
@socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
    print('received my event: ' + str(json))
    socketio.emit('my response', json, callback=messageReceived)


def messageReceived(methods=['GET', 'POST']):
    print('message was received!!!')

if __name__ == "__main__":
    socketio.run(app, debug=True)

В моем браузере я получаю сообщение об ошибке, что firefox не может установить соединение с wss: //192.168.0.22: 5050. Я уже пробовал интерфейс с веб-сокетом из руководства, которое сейчас закомментировано. Я не уверен, какой URL-адрес мне следует использовать для моей серверной части или что я должен туда добавить. Извините, если это очевидно, но я полный новичок.

Заранее спасибо!

РЕДАКТИРОВАТЬ: В chrome я получаю ошибку: «Соединение WebSocket с 'wss: //192.168. 0.38: 5000 / 'failed: истекло время квитирования открытия WebSocket "Также, поскольку я видел эту ошибку при тестировании материала, может быть, этот вопрос может быть актуальным? vue попытка подключения socket.io возвращает ошибку «Нет заголовка 'Access-Control-Allow-Origin'», даже если источники были установлены

1 Ответ

0 голосов
/ 12 мая 2020

, поэтому часть сокета, которую я в конечном итоге использовал для клиента / компонента: 

import io from 'socket.io-client';

created() {
    // test websocket connection
    const socket = io.connect('http://192.168.0.38:5000');

    // getting data from server
    // eslint-disable-next-line
    socket.on('connect', function () {
      console.error('connected to webSocket');
      //sending to server
      socket.emit('my event', { data: 'I\'m connected!' });
    });

    // we have to use the arrow function to bind this in the function
    // so that we can access Vue  & its methods
    socket.on('update_on_layouts', (data) => {
      this.getAllLayouts();
      console.log(data);
    });
  },

Код сервера Flask остался, как показано выше. Кроме того, вот пример с моего flask сервера для выдачи update_on_layouts socketio.emit('update_on_layouts', 'success')

...