# How to add WebSocket to Genie Site?

**URL:** <https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976>\
**Category:** Web Stack\
**Tags:** question, package, genie\
**Created:** [July 29, 2022, 12:55pm UTC](https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976 "2022-07-29T12:55:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jack\_N](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jack_n/32/37265_2.png) [@Jack\_N](https://discourse.julialang.org/u/Jack_N)\
**Post date:** [July 29, 2022, 12:55pm UTC](https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976/1 "2022-07-29T12:55:03Z")

</div>

The Genie.jl documentation does not seem to have any information as to how to include a websocket in a web app, all the examples are just from the command line. I have a website composed of html and javascript in a webapp, but I cannot figure out how to add the Assets.channels\_support() script such that I can use websockets with my existing html website. Currently, I try loading my website by routing with an html render function and I run Assets.channels\_support(), but the latter appears to overwrite the former, but I want the html to still display. How can I do this?

---

<div class="post-metadata">

**Author:** ![D\_A](https://avatars.discourse-cdn.com/v4/letter/d/8dc957/32.png) [@D\_A](https://discourse.julialang.org/u/D_A)\
**Post date:** [July 29, 2022, 2:50pm UTC](https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976/2 "2022-07-29T14:50:23Z")

</div>

I needed to do many months ago a small web application with a form and websockets (to avoid the reload of the page).

From this [documentation](https://genieframework.com/docs/genie/v5/tutorials/17--Working_with_Web_Sockets.html), I needed to understand that `Assets.channels_support()` was just a [string](https://github.com/GenieFramework/Genie.jl/blob/master/src/Assets.jl#L399), so my main page was something like:

```julia
function show_page()
    form = read("public/form.html") |> String # existing HTML page
    return Assets.channels_support() * form # combining with channel support
end

```

---

<div class="post-metadata">

**Author:** ![Jack\_N](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jack_n/32/37265_2.png) [@Jack\_N](https://discourse.julialang.org/u/Jack_N)\
**Post date:** [July 29, 2022, 3:31pm UTC](https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976/3 "2022-07-29T15:31:20Z")

</div>

Unfortunately this solution will not work for me since my webpage is spread across multiple html, javascript, and css files which reference each other by filename, so I cannot simply string them all together.

Do you have any suggestions on how to connect a WebSocket to an MVC web app @essenciary?

---

<div class="post-metadata">

**Author:** ![essenciary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/essenciary/32/210469_2.png) [@essenciary](https://discourse.julialang.org/u/essenciary)\
**Post date:** [August 2, 2022, 12:37pm UTC](https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976/4 "2022-08-02T12:37:06Z")

</div>

You put `<% Genie.Assets.channels_support() %>` inside the HTML of your web page and this outputs a `<script>...</script>` tag and sets up routing and everything else.

This in effect, in the browser, gives you access to a `Genie.WebChannels` object and you can call `Genie.WebChannels.sendMessageTo(...)` to push data over the websocket.

On the server, you define the corresponding `channel(...)` to catch/route/delegate these websockets requests to your handler functions.

---

<div class="post-metadata">

**Author:** ![Jack\_N](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jack_n/32/37265_2.png) [@Jack\_N](https://discourse.julialang.org/u/Jack_N)\
**Post date:** [August 3, 2022, 6:21pm UTC](https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976/5 "2022-08-03T18:21:39Z")

</div>

Thank you very much for your answer, that worked for me!

Related github issue here: [Websocket Documentation Missing Website Integration · Issue #552 · GenieFramework/Genie.jl · GitHub](https://github.com/GenieFramework/Genie.jl/issues/552)

---

<div class="post-metadata">

**Author:** ![essenciary](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/essenciary/32/210469_2.png) [@essenciary](https://discourse.julialang.org/u/essenciary)\
**Post date:** [August 5, 2022, 3:58pm UTC](https://discourse.julialang.org/t/how-to-add-websocket-to-genie-site/84976/6 "2022-08-05T15:58:54Z")

</div>

Happy to hear it!