WebSocket connection to 'ws://localhost:1234/tiptap' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

1

I’m trying to understand how to use local websocket server.

In order to use a local websocket server I modified the WebSocketProvider in https://github.com/yjs/yjs-demos/blob/master/tiptap/src/Realtime.js as :

 //const provider = new WebsocketProvider('wss://demos.yjs.dev', 'tiptap', ydoc)
const provider = new WebsocketProvider('ws://localhost:1234', 'tiptap', ydoc)

But in the browser console I get this error message:

WebSocket connection to ‘ws://localhost:1234/tiptap’ failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

image
image2000×571 98.1 KB

How to solve the problem?
Looking forward to your kind help.
Marco

2

Are you running the y-websocket server locally? e.g.

PORT=1234 npx y-websocket-server
3

@canadaduane It was my mistake!!! I was not running the y-websocket server locally…)))

(base) marco@pc01:~/webMatters/vueMatters/yjs-demos/tiptap$ PORT=1234 npx y-websocket-server

running on port 1234

I got it running!

Thank you. And pardon for this mistake

4

Glad you got it running!

1 Like
5

@canadaduane Hi Duane!
I’m trying now to make a further step .
Even if my app will be deployed in the cloud, I’m developing it at the moment in a local PC.
Just to understand how to make it work properly, I tried to use Realtime.js as is, with
const provider = new WebsocketProvider(‘ws://localhost:1234’, ‘tiptap’, ydoc)

In the nginx webserver configuration I’ve put this part for the websocket:

map $http_upgrade $connection_upgrade {
  default upgrade;
  '' close;
}

upstream websocket {
    server ggc.world:1234;
}

server {
    listen 8443 ssl;
    server_name ggc.world;

    ssl_certificate /etc/letsencrypt/live/ggc.world-0002/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ggc.world-0002/privkey.pem; # managed by Certbot
    ssl_trusted_certificate /etc/letsencrypt/live/ggc.world-0002/chain.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Host $host;
    }
}

I run the y-websocket-server locally:

(base) marco@pc01:~/webMatters/vueMatters/GGC$ PORT=1234 npx y-websocket-server
running on port 1234

When running the app I get this error:

WebSocket connection to ‘wss://localhost:1234/tiptap’ failed: Error in connection establishment: nett::ERR_SSL_PROTOCOL_ERROR

I tried to change in nginx configuration:

upstream websocket {
    #server ggc.world:1234;
    server 127.0.0.1:1234;
}

server {
    listen 8443 ssl;
    server_name ggc.world;

But again:
“WebSocket connection to 'wss://localhost:1234/tiptap’failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR”

If nginx is listening port 8443 for ssl, should I put it somewhere in Realtime.js ?
How to make it work?

6

Here is my nginx configuration. I have a custom y-websocker-server running on port 1235 (see code):

server {
	listen 80 ;
	# listen [::]:80 ipv6only=on;

	root /var/www/html;
	index index.php index.html index.htm;

	server_name y.relm.us;

	location / {
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header Host $host;
		proxy_pass http://localhost:1235;

		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "Upgrade";
		proxy_connect_timeout 7d;
		proxy_send_timeout 7d;
		proxy_read_timeout 7d;

		client_max_body_size 2m;
	}

	error_page 413 @filetoobig;
	error_page 404 /404.html;
	error_page 500 502 503 504 /50x.html;
	location = /50x.html {
		root /usr/share/nginx/html;
	}

	location @filetoobig {
		add_header Access-Control-Allow-Origin * always;
	}

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/y.relm.us/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/y.relm.us/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}