Как подключить клиентский socket.io es6?

Question

[Роман Андреевич]

Коллеги, доброго времени суток, прошу помощи, так как не могу решить проблему. Суть следующая:

Делаю проект, в котором клиентская часть должна подключаться к серверу через сокеты. Выбрал socket.io, но не могу подключить (или собрать) клиентский файл. Я подключаю все js файлы через import (es6) , но не могу подключить socket.io-client

С официального репозитория вроде поставил socket.io-client но через import не могу подключить. Кто ставил, подскажите что и как, за ранее благодарю.

Дополнение: необходимо что бы клиентская часть socket.io работала с другим сервером (хостом), на котором установлен сервер socket.io - как то так. Прошу прощения за возможное некорректное пояснение))

Comments

[alex]

не могу подключить

что значит не можете? клавиатуру потеряли? пальцы не слушаются? соседи мешают?

[Роман Андреевич]

Alex, ну да смешно)))) все на месте!

Не могу это значит что браузер выдает ошибку, когда я делаю

import io from './libs/socket.io.js';

[alex]

Роман Андреевич, а ничего смешного тут нет абсолютно

браузер выдает ошибку

мы уже почти у цели. КАКУЮ ошибку?

[Роман Андреевич]

Alex,

Uncaught SyntaxError: The requested module './libs/socket.io.js' does not provide an export named 'default'

[alex]

Роман Андреевич, ок, а теперь покажите, где вы импортите пакет soket.io-client?

[Роман Андреевич]

Alex, import io from './libs/socket.io-client.js';

Как в манулае, а index.ejs я не указываю

[Роман Андреевич]

Alex, вот ссылка на сам файл как я понял

[alex]

Роман Андреевич, в мануале не так. в мануале два способа. вот так:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost');
  socket.on('connect', function(){});
  socket.on('event', function(data){});
  socket.on('disconnect', function(){});
</script>

и вот так:

import io from 'socket.io-client';
const socket = io('http://localhost');

и ни один из них не похож на ваш

[Роман Андреевич]

Alex, да все правильно, но суть же import es6 в этом:

<script src="<%=assetFingerprint('/javascripts/src/mapApplication.js') %>" type="module"></script>

a потом, в js модулях я подключаю:

import io from './libs/socket.js';
т.е. иными словами у меня есть клиентский файл, как я опять же понимаю, который я просто подключаю на сайте, а дальше в классе:

constructor(params) {

		this.bus = eventEmitter.bus;
		this.conteiner = params.conteiner;
		this.size = params.size;
		this.styleColor = params.styleColor;
		this.io = io( 'http://searchengine.localhost');

	}

и подключаюсь к своему api, как то так должно работать то, или я не прав???

[alex]

Роман Андреевич, ппц, вы еще и нативные модули юзаете. почему сразу об этом в вопросе не сказали? вам в разведке надо работать из вас фиг че вытащишь.

с чего вы вообще взяли что это будет работать? чтобы юзать нативный import, должен быть нативный export. откройте файл socket.io.js и покажите где вы там увидели нативный export. там вообще UMD. для вас специально в мануале написали как выполнить подключение, но нет, вы пытаетесь изобрести что-то свое непонятное

[Роман Андреевич]

Alex, ну не изобрести конечно. В итоге мне нужно что бы с клиента без серверной части текущего сайта, подключался к api, через socket.io. Я прошу прощения, что в начале не написал или написал некорректно, каюсь.

Но теперь если я делаю вот так:

<script src="http://searchengine.localhost/socket.io/socket.io.js"></script>

а на клиенте, вот так:

this.io = io('http://searchengine.localhost');

то браузере я получаю вот так:

WebSocket connection to 'ws://searchengine.localhost/socket.io/?EIO=3&transport=websocket&sid=HJxJPuRJ_6eh0VMlAAAB' failed: Error during WebSocket handshake: Unexpected response code: 400

Но при этом соединение установлено! Но ошибка пропадает, если указать порт приложения, но это это не безопасно, я считаю. Если я правильно понял, то мне нужно изменить конфиг апача в дданном случае.

[alex]

Роман Андреевич, но это как бэ уже вообще к теме данного вопроса не имеет никакого отношения. траблы на сервере. почитайте вот это

[Роман Андреевич]

Alex, да читал я это, пока не помогает, сервер стоит apache2, партия так сказала, разбираюсь, в любом случае большое спасибо что откликнулись

[Роман Андреевич]

Alex, решено!!!)))) не так как хотелось бы но тем не менее, мало ли кому пригодится, но вот конфиг apache2:

<VirtualHost *:80>
	
	ServerName searchengine.localhost
	ServerAlias www.searchengine.localhost
	ServerAdmin webmaster@localhost
	DocumentRoot /home/user/projects/searchengine.localhost

  ProxyVia On
  ProxyRequests Off
  ProxyPreserveHost on

  <Location />
      ProxyPass http://localhost:5265/ retry=0 timeout=30
      ProxyPassReverse http://localhost:5265/
  </Location>
  <Location /socket.io>
      RewriteEngine On
      RewriteCond %{QUERY_STRING} transport=websocket    [NC]
      RewriteRule /(.*) ws://localhost:5265/socket.io/$1 [P,L]
      ProxyPass http://localhost:5265/socket.io retry=0 timeout=30
      ProxyPassReverse http://localhost:5265/socket.io
  </Location>
  <Proxy *>
      Options FollowSymLinks MultiViews
      AllowOverride All
      Order allow,deny
      allow from all
  </Proxy>

</VirtualHost>

нужен модуль sudo a2enmod proxy_wstunnel и sudo a2enmod proxy_http, возможно еще какие-то установлены но я не помню и если что потом вылезет, каждый подправит.

Далее в проекте подключаем

и в скриптах:

this.io = io('http://yourhostname.localhost');

И все будет работать, проверено!!!