# Infinite websockets created via Subscription?

**URL:** <https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868>\
**Category:** Learn\
**Created:** [March 13, 2018, 9:00pm UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868 "2018-03-13T21:00:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pvillega](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pvillega/32/510_2.png) [@pvillega](https://discourse.elm-lang.org/u/pvillega)\
**Post date:** [March 13, 2018, 9:00pm UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/1 "2018-03-13T21:00:06Z")

</div>

Hi all,

I’m building an application using the [RealWorld example app](https://github.com/rtfeldman/elm-spa-example) as a guide, and I hit some odd issue.

I have my `pageSubscriptions` method to declare subscriptions based on the page we have loaded, like:

```auto
pageSubscriptions : Flags -> Page -> Sub Msg
pageSubscriptions flags page =
    case page of
        Blank ->
            Sub.none

        Errored _ ->
            Sub.none

        NotFound ->
            Sub.none

        Login _ ->
            Sub.map ParseMessage (Login.subscriptions)

```

Where `subscriptions` does:

```auto
subscriptions = WebSocket.listen url

```

The problem is that, according to what I see in developer tools and the ‘events’ panel in Debug mode, `subscriptions` is called every minute or so, and that creates a new WebSocket connection. As a consequence, I end up with plenty of WebSocket connections open unless I refresh the page.

Has anyone seen this before? What’s the fix? I tried Google/SO/etc but couldn’t find any answer.

Cheers,  
Pere

---

<div class="post-metadata">

**Author:** ![christian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/christian/32/1384_2.png) [@christian](https://discourse.elm-lang.org/u/christian)\
**Post date:** [March 13, 2018, 10:03pm UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/2 "2018-03-13T22:03:13Z")

</div>

I think your `Sub.map ParseMessage (Login.subscriptions)` will create a subscription to the `ParseMessage` `Msg` in your application, resulting in `Login.subscriptions` being called each time a `ParseMessage` is produced.

I think what you want is

```auto
pageSubscriptions : Flags -> Page -> Sub Msg
pageSubscriptions flags page =
    case page of
        ....

        Login _ ->
            Login.subscriptions -- subscription created only once

```

---

<div class="post-metadata">

**Author:** ![pvillega](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pvillega/32/510_2.png) [@pvillega](https://discourse.elm-lang.org/u/pvillega)\
**Post date:** [March 13, 2018, 10:10pm UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/3 "2018-03-13T22:10:51Z")

</div>

Thanks for the answer! I have a follow up question:

I’m following the pattern from RealWorld example app for multiple pages, and it needs to map messages from pages to messages `Main` understands.

If what you mention is the issue, how can I map the messages from subscriptions when having multiple pages? What’s the alternative?

---

<div class="post-metadata">

**Author:** ![christian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/christian/32/1384_2.png) [@christian](https://discourse.elm-lang.org/u/christian)\
**Post date:** [March 13, 2018, 10:21pm UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/4 "2018-03-13T22:21:29Z")

</div>

I assume you’re referring to the use of `Html.map` in the [`viewPage` function](https://github.com/rtfeldman/elm-spa-example/blob/master/src/Main.elm#L94-L155). That takes the `Msg` values produced by the submodules and maps them onto a `Msg` defined in the `Main` module (e.g. it converts a `Page.Login.Msg` to a `Main.Msg`, which is necessary for it to be handled by the `Main.update` function).

All of this is very separate from the `Sub msg` values produced by your top level `subscriptions` function. The only time you would want to use `Sub.map` is if you wanted to “listen” for some other `Msg` value that gets produced, and then produce a different `Msg` as a result.

In the case of your websocket connection, that is **not** what you want to do. There, you want to create a single subscription that produces `ParseMessage` when a message comes in.

---

<div class="post-metadata">

**Author:** ![pvillega](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pvillega/32/510_2.png) [@pvillega](https://discourse.elm-lang.org/u/pvillega)\
**Post date:** [March 14, 2018, 9:53am UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/5 "2018-03-14T09:53:20Z")

</div>

So, thanks for the answer, but `Sub.map` wasn’t the issue. It seems the problem is the fact I call `WebSocket.listen` each time `subscription` is called, which happens regularly due to it being called after `update` as far as I can see.

How can I prevent the socket to be started each time? Is there any `trick`?

---

<div class="post-metadata">

**Author:** ![mfeineis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mfeineis/32/104_2.png) [@mfeineis](https://discourse.elm-lang.org/u/mfeineis)\
**Post date:** [March 14, 2018, 10:00am UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/6 "2018-03-14T10:00:27Z")

</div>

I believe the subscriptions are called on every iteration of the render loop, maybe you need to make sure that `WebSocket.listen` is only set up once?

---

<div class="post-metadata">

**Author:** ![pvillega](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pvillega/32/510_2.png) [@pvillega](https://discourse.elm-lang.org/u/pvillega)\
**Post date:** [March 14, 2018, 10:15am UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/7 "2018-03-14T10:15:40Z")

</div>

Yes, I guess so, I’m just surprised as all examples I’ve seen just call `listen` so I assumed it was doing some WS management behind the scenes… ☹

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [March 14, 2018, 5:37pm UTC](https://discourse.elm-lang.org/t/infinite-websockets-created-via-subscription/868/8 "2018-03-14T17:37:27Z")

</div>

This code seems right to me. The websocket library should be keeping track of which connections are already open and not re-opening them.

I can think of two things that might be going wrong:

1. The url passed to WebSocket.listen changes. In this case, the library would open a new connection for each url.

2. The subscriptions method might be switching between returning WebSocket.listen and not. In this case, though, I’d expect a lot of opened connections but also a lot of closed ones.