# Using socket.io with Elm 0.19

**URL:** <https://discourse.elm-lang.org/t/using-socket-io-with-elm-0-19/3153>\
**Category:** Show and Tell\
**Created:** [February 16, 2019, 6:15pm UTC](https://discourse.elm-lang.org/t/using-socket-io-with-elm-0-19/3153 "2019-02-16T18:15:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jacob/32/108_2.png) [@jacob](https://discourse.elm-lang.org/u/jacob)\
**Post date:** [February 16, 2019, 6:15pm UTC](https://discourse.elm-lang.org/t/using-socket-io-with-elm-0-19/3153/1 "2019-02-16T18:15:36Z")

</div>

Hi everyone! I just wrote an example of a full web application (client and server with build tools etc) that uses an Elm 0.19 client speaking to a Node.js webserver using socket.io-based websockets: [https://github.com/matthewsj/elm-socketio](https://github.com/matthewsj/elm-socketio)

This example is pretty small but demonstrates a bunch of things:

- A full, small Elm program
- A way to use ports to expose [socket.io](http://socket.io) functionality to an Elm application
- A webpack setup that bundles javascript and Elm
- An easy setup for developing a Elm+Javascript client and a Node.js-based server in one project

I’m not an expert in just about anything in this example, so I’m sure there are a lot of ways to improve it. But hopefully it’s good enough to serve as a starting point for others who want to build similar projects.

Feedback welcome!

---

<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:** [February 16, 2019, 6:43pm UTC](https://discourse.elm-lang.org/t/using-socket-io-with-elm-0-19/3153/2 "2019-02-16T18:43:54Z")

</div>

Interesting. We use [socket.io](http://socket.io) with a Node.js back end for one small portion of our application as well, and I have been thinking about how we would port that portion of the front end over from jQuery to Elm, and I came to the same conclusion as you—ports is going to be the way to go.

There’s one thing I would add, however. If you will be receiving more than one type of [socket.io](http://socket.io) message (e.g. more than one type of JSON object), then you can make your subscription port take a `Json.Encode.Value` type rather than a `String`:

```auto
port receiveMessage : (Value -> msg) -> Sub msg

```

And elsewhere in your code use `Json.Decode.oneOf` to apply more than one decoder to it. For example, this allows you to use a single port to receive both a `Post` message and a `Reply` message (assuming the latter is always nested inside of the former and therefore has a different type in your Elm app).

This approach eliminates the need to litter your Elm app with many similar-but-slightly-different ports / messages to handle all of the incoming websocket message types. The Elm guide does give an example of using a `Value` in incoming ports, but the concept of a not-yet-decoded JSON value is kind of abstract and might be hard to grok for someone new to Elm.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 26, 2019, 6:44pm UTC](https://discourse.elm-lang.org/t/using-socket-io-with-elm-0-19/3153/3 "2019-02-26T18:44:01Z")

</div>

Closed on February 26, 2019, 6:44pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.