前端调用websocket的3种不同写法

2024-07-16 23:59| 来源: 网络整理| 查看: 265

一、前言二、使用写法1写法2写法3

一、前言我们知道websocket是一个 ws://*** 连接，我们可以调用网站 websocket.org 的 ws://echo.websocket.org 作为前端调用服务端的地址只是 3 种 [ 写法 ]，不是 3 种 [ 方法 ] 二、使用写法1

请参考我这一篇Go gorilla websocket 小试牛刀，使用其中的 client.html 文件，修改服务端地址为 ws://echo.websocket.org 即可。效果如图在这里插入图片描述

代码如下

websocket实现消息推送 window.addEventListener("load",function (event) { let output = document.getElementById("output") let input = document.getElementById("input") let ws let print = function (message) { let d=document.createElement("div") d.innerHTML = message output.appendChild(d) } document.getElementById("open").onclick = function (event) { if(ws){ return false } ws = new WebSocket("ws://echo.websocket.org"); ws.onopen = function (event) { print("打开") } ws.onclose = function (event) { print("关闭") ws = null } ws.onmessage = function (event) { print("响应："+event.data) } ws.onerror = function (event) { print("错误："+event.data) } return false } document.getElementById("send").onclick = function (event) { if(!ws){ return false } print("发送："+input.value) ws.send(input.value) return false } document.getElementById("close").onclick = function (event) { ws.close() return false } }) 点击: “打开”和服务端创建一个连接。 "发送"发送一个消息给服务端。 "关闭"去关闭连接. 你可以改变消息Message并且发送多次. 打开关闭发送写法2

使用 http://www.websocket.org/echo.html中的demo，就在这个页面下面。效果如图在这里插入图片描述

代码如下

WebSocket Test var wsUri = "wss://echo.websocket.org/"; var output; function init() { output = document.getElementById("output"); testWebSocket(); } function testWebSocket() { websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; } function onOpen(evt) { writeToScreen("CONNECTED"); doSend("WebSocket rocks"); } function onClose(evt) { writeToScreen("DISCONNECTED"); } function onMessage(evt) { writeToScreen('RESPONSE: ' + evt.data+''); websocket.close(); } function onError(evt) { writeToScreen('ERROR: ' + evt.data); } function doSend(message) { writeToScreen("SENT: " + message); websocket.send(message); } function writeToScreen(message) { var pre = document.createElement("p"); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre); } window.addEventListener("load", init, false); WebSocket Test 写法3

自己写一个，使用try{}catch(){}捕获异常效果如图在这里插入图片描述

代码如下

WebSocket Test WebSocket 连接测试 //消息打印 var output = document.getElementById("output"); var print = function (message) { var d=document.createElement("div") d.innerHTML = message output.appendChild(d) }; //websocket连接 var wsUri = "wss://echo.websocket.org/"; testWebSocket(wsUri); function testWebSocket(wsUri){ var webSocket = new WebSocket(wsUri); //接收消息 webSocket.onmessage = function(event){ //捕获异常 try { var obj = JSON.parse(event.data); if (typeof obj == 'object' && obj) { print(obj); console.log(obj); } } catch (e) { print('catch-error' + event.data + ' json解析异常 ' + e); console.log('catch-error' + event.data + ' json解析异常 ' + e); } }.bind(this); //连接成功 webSocket.onopen = function () { print('connect-success'); console.log('connect-success') }; //连接关闭 webSocket.onclose = function (event) { print('connect-close：' + event.data); console.log('connect-close：' + event.data) }; //连接异常 webSocket.onerror = function (event) { print('connect-error：' + event.data); console.log('connect-error：' + event.data); } }

【本文地址】

公司简介

联系我们