Let’s create a JavaScript websocket server. <\/p>\n
To start with carry out the following steps…<\/p>\n
Now we will add the scripts, so add the following to package.json<\/p>\n
\r\n"scripts": {\r\n "server": "node server.js",\r\n "client": "node client.js"\r\n "build": "tsc"\r\n}\r\n<\/pre>\nLet’s add some code, in the server.js put the following<\/p>\n
\r\nimport WebSocket from "ws";\r\n\r\nconst wss = new WebSocket.Server({ port: 4000 });\r\n\r\nwss.on("connection", ws => {\r\n ws.on('message', message => {\r\n console.log('received: %s', message);\r\n });\r\n\r\n ws.on("close", () => {\r\n console.log("Close connection");\r\n });\r\n\r\n ws.send("Server says Hi");\r\n});\r\n<\/pre>\nIn the above code we create a new websocket server on port 4000 then we handle any connection’s (once a connection is made the server sends back the message “Server says Hi”. The ws.on “message” will output any messages sent from the client. It should be fairly obvious that the “close” is called when a connection is closed.<\/p>\n
Let’s now put the following in the client.ts<\/p>\n
\r\nimport WebSocket from "ws";\r\n\r\nconst ws = new WebSocket("ws:\/\/localhost:4000");\r\n\r\nws.onopen = () => {\r\n ws.send("Client says Hi");\r\n};\r\n\r\nws.onerror = error => {\r\n console.log(error);\r\n}\r\n\r\nws.onmessage = msg => { \r\n console.log(`Client onmessage: ${msg.data}`);\r\n}\r\n\r\nws.onclose = () => {\r\n console.log("Close");\r\n};\r\n<\/pre>\nIn the above we open the connection to the web socket server, when the connection is open (onopen) we send a message “Client says Hi” to the server, obviously any errors are sent to the onerror function and any message from the server are routed to the onmessage function, finally onclose is called if the server closes the connection.<\/p>\n
Now run the script command yarn build<\/em> and then in one terminal run yarn server<\/em> and in another terminal run yarn client<\/em>.<\/p>\nWe can also send specific commands to the server, for example in the client add the following to the onopen function<\/p>\n
\r\nws.send("getData");\r\n<\/pre>\nWithin the server add the following<\/p>\n
\r\nws.on("getData", msg => {\r\n console.log("getData called")\r\n});\r\n<\/pre>\nSo now when the server receives a getData<\/em> messages it’s routed to this server function.<\/p>\nIf we have multiple client’s connecting to a server, we can send messages to each client using code, like the following<\/p>\n
\r\nwss.clients.forEach(client => {\r\n if (client.readyState === WebSocket.OPEN) {\r\n client.send("Broadcasting a message);\r\n }\r\n});\r\n<\/pre>\nWe can also extend the server “connection” function like this<\/p>\n
\r\nwss.on("connection", (ws, request) => {\r\n console.log(request);\r\n}\r\n<\/pre>\nThe request<\/em> parameter allows us to check the request.url<\/em> if we want to change take different actions depending upon the query part of the websocket URL.<\/p>\nIt’s often useful to implement ping\/pong capabilities which would allow us to check if the client still exists, here’s rather simplistic example of this type of code.<\/p>\n
\r\nwss.on("connection", (ws, request) => {\r\n ws.isAlive = true;\r\n\r\n ws.on("pong", () => {\r\n console.log("Pong called");\r\n ws.isAlive = true;\r\n });\r\n\r\n setInterval(function ping() {\r\n wss.clients.forEach(function each(ws: any) {\r\n if (ws.isAlive === false) {\r\n console.log("Terminated client")\r\n return ws.terminate();\r\n }\r\n \r\n ws.isAlive = false;\r\n console.log("Ping client")\r\n ws.ping();\r\n });\r\n }, 10000);\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"Let’s create a JavaScript websocket server. To start with carry out the following steps… Create a folder, mine’s wsserver and cd to it Run yarn init -y Run tsc –init Run yarn add ws @types\/ws Add a file (mine’s server.ts) for our server code Add another file this time for a sample client (mine’s client.ts) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,46,267],"tags":[],"class_list":["post-7428","post","type-post","status-publish","format-standard","hentry","category-javascript","category-typescript","category-websocket"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7428"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7428\/revisions"}],"predecessor-version":[{"id":7461,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7428\/revisions\/7461"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}