{"id":1173,"date":"2022-05-15T18:24:13","date_gmt":"2022-05-15T16:24:13","guid":{"rendered":"https:\/\/fileidea.com\/?p=1173"},"modified":"2022-05-17T10:05:50","modified_gmt":"2022-05-17T08:05:50","slug":"how-to-use-golang-and-react-for-websocket","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2022\/05\/15\/how-to-use-golang-and-react-for-websocket\/","title":{"rendered":"How to use Golang and React for WebSocket"},"content":{"rendered":"\n

I found myself wanting to try out little bit of experimenting to learn more about web sockets, let us try it out using golang <\/strong>and react<\/strong>. <\/p>\n\n\n\n

First, set up a project Golang project by creating a folder and in it, create main.go<\/strong> file.<\/p>\n\n\n\n

Golang WebSocket Server<\/h2>\n\n\n\n

It’s very simple if you take use of the already great crates that are out there. One that I found working out very well with web socket is gorilla websocket<\/a>.<\/p>\n\n\n

\npackage main\n\nimport (\n\t"fmt"\n\t"log"\n\t"net\/http"\n\n\t"github.com\/gorilla\/websocket"\n)\n\nvar upgrader = websocket.Upgrader{\n\tReadBufferSize:  1024,\n\tWriteBufferSize: 1024,\n}\n\nfunc main() {\n\thttp.HandleFunc("\/ws", wsEndpoint)\n\tlog.Fatal(http.ListenAndServe(":8080", nil))\n}\n\nfunc wsEndpoint(w http.ResponseWriter, r *http.Request) {\n\tupgrader.CheckOrigin = func(r *http.Request) bool { return true }\n\t\/\/ upgrade this connection to a WebSocket\n\t\/\/ connection\n\tws, err := upgrader.Upgrade(w, r, nil)\n\tif err != nil {\n\t\tlog.Println(err)\n\t}\n\n\tlog.Println("Client Connected")\n\terr = ws.WriteMessage(1, []byte("Hello client you've connected!"))\n\tif err != nil {\n\t\tlog.Println(err)\n\t}\n\treader(ws)\n}\n\nfunc reader(conn *websocket.Conn) {\n\tfor {\n\t\t\/\/ read in a message\n\t\tmessageType, p, err := conn.ReadMessage()\n\t\tif err != nil {\n\t\t\tlog.Println(err)\n\t\t\treturn\n\t\t}\n\n\t\t\/\/ print out incoming message\n\t\tfmt.Println("incoming message: " + string(p))\n\n\t\tif err := conn.WriteMessage(messageType, p); err != nil {\n\t\t\tlog.Println(err)\n\t\t\treturn\n\t\t}\n\t}\n}\n\n<\/pre><\/div>\n\n\n
You should be able to run your program from the get-go. This is how the mod file<\/strong> looks:<\/p>\n\n\n
\nmodule example.com\/m\/v2\n\ngo 1.15\n\nrequire github.com\/gorilla\/websocket v1.5.0 \/\/ indirect\n\n<\/pre><\/div>\n\n
\nhttp.HandleFunc("\/ws", wsEndpoint)\n<\/pre><\/div>\n\n\n
So let’s go through the code, first of all we got a main function, the starting point of the program and in it will first of all take use of the http package and set up our listeners for the endpoint \/ws, which we pass in the method wsEndpoint. So each <\/p>\n\n\n
\nlog.Fatal(http.ListenAndServe(":8080", nil))\n<\/pre><\/div>\n\n\n
The ListenAndServe <\/strong>function will be running our actual http server and we will print out error if we get one into the log.<\/p>\n\n\n
\nfunc wsEndpoint(w http.ResponseWriter, r *http.Request) {\n\tupgrader.CheckOrigin = func(r *http.Request) bool { return true }\n\t\/\/ upgrade this connection to a WebSocket\n\t\/\/ connection\n\tws, err := upgrader.Upgrade(w, r, nil)\n\tif err != nil {\n\t\tlog.Println(err)\n\t}\n\n\tlog.Println("Client Connected")\n\terr = ws.WriteMessage(1, []byte("Hi Client!"))\n\tif err != nil {\n\t\tlog.Println(err)\n\t}\n\treader(ws)\n}\n\n<\/pre><\/div>\n\n\n
Our Endpoint function takes in a ResponseWriter and a Request object which is what we need to make to make the incoming request into a websocket protocol connection with our server. This is called that we do an upgrade. From the upgrade function we get back a ws connection which we can read messages from.<\/p>\n\n\n
\nfunc reader(conn *websocket.Conn) {\n\tfor {\n\t\t\/\/ read in a message\n\t\tmessageType, p, err := conn.ReadMessage()\n\t\tif err != nil {\n\t\t\tlog.Println(err)\n\t\t\treturn\n\t\t}\n\n\t\t\/\/ print out incoming message\n\t\tfmt.Println("incoming message: " + string(p))\n\n\t\tif err := conn.WriteMessage(messageType, p); err != nil {\n\t\t\tlog.Println(err)\n\t\t\treturn\n\t\t}\n\t}\n}\n<\/pre><\/div>\n\n\n
From our reader <\/strong>function we can read the message from the websocket which we convert from bytes into string with help from string(p)<\/strong>, which we then can send a response back with WriteMessage <\/strong>on the same socket to the client.<\/p>\n\n\n\n
React WebSocket Client<\/h2>\n\n\n\n
Now let’s create a React project, I like to use vite to get started fast like this:<\/p>\n\n\n
\nnpm create vite@latest\n<\/pre><\/div>\n\n\n
Then go with React and nativescript. Then what web socket package I use is websocket <\/strong>from here: https:\/\/www.npmjs.com\/package\/websocket. Also remember to download the types for typescript: node_modules\/@types\/websocket<\/strong>. So we will run npm install on these:<\/p>\n\n\n
\nnpm i websocket \nnpm i node_modules\/@types\/websocket\n<\/pre><\/div>\n\n\n
Then in our React main.tsx<\/strong> let’s write some code where we connect to the server and send a random message for testing:<\/p>\n\n\n
\nimport { useEffect, useState } from 'react'\nimport logo from '.\/logo.svg'\nimport '.\/App.css'\n\nimport * as WebSocket from "websocket"\n\n\n\n\nfunction App() {\n\n  useEffect(() => {\n    console.log("in it")\n    const socket = new WebSocket.w3cwebsocket('ws:\/\/localhost:8080\/ws');\n\n    socket.onopen = function () {\n      socket.send("helloheee!")\n      socket.onmessage = (msg: any) => {\n        console.log(msg);\n        console.log("we got msg..")\n      };\n    };\n  }, []);\n\n\n  const [count, setCount] = useState(0)\n\n  return (\n    <div className="App">\n      <header className="App-header">\n        <img src={logo} className="App-logo" alt="logo" \/>\n        <p>Hello Vite + React!<\/p>\n        <p>\n          <button type="button" onClick={() => setCount((count) => count + 1)}>\n            count is: {count}\n          <\/button>\n        <\/p>\n        <p>\n          Edit <code>App.tsx<\/code> and save to test HMR updates.\n        <\/p>\n        <p>\n          <a\n            className="App-link"\n            href="https:\/\/reactjs.org"\n            target="_blank"\n            rel="noopener noreferrer"\n          >\n            Learn React\n          <\/a>\n          {' | '}\n          <a\n            className="App-link"\n            href="https:\/\/vitejs.dev\/guide\/features.html"\n            target="_blank"\n            rel="noopener noreferrer"\n          >\n            Vite Docs\n          <\/a>\n        <\/p>\n      <\/header>\n    <\/div>\n  )\n}\n\nexport default App\n\n<\/pre><\/div>\n\n\n
Also worth noting, inside the main.tsx<\/strong> I removed the StrictMode elements<\/p>\n\n\n
\n<React.StrictMode>\n<\/pre><\/div>\n\n\n
if I didn’t it would trigger the user effect twice for some reason. Anyway that’s it to get started fast with a web socket to start experimenting. Hope coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
I found myself wanting to try out little bit of experimenting to learn more about web sockets, let us try it out using golang and react. First, set up a project Golang project by creating a folder and in it, create main.go file. Golang WebSocket Server It’s very simple if you take use of the … <\/p>\n
Continue reading “How to use Golang and React for WebSocket”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[84,72],"tags":[51,86,89,37,15],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1173"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=1173"}],"version-history":[{"count":5,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1173\/revisions"}],"predecessor-version":[{"id":1180,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1173\/revisions\/1180"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=1173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=1173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}