vue项目使用webSocket前后端建立连接推送消息
生活随笔
收集整理的這篇文章主要介紹了
vue项目使用webSocket前后端建立连接推送消息
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>websocket通訊</title>
</head>
<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> -->
<script>var socket;function openSocket() {if(typeof(WebSocket) == "undefined") {console.log("您的瀏覽器不支持WebSocket");}else{console.log("您的瀏覽器支持WebSocket");//實現化WebSocket對象，指定要連接的服務器地址與端口 建立連接//等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");//var socketUrl="${request.contextPath}/im/"+$("#userId").val();var socketUrl="ws://localhost:8888/rest/supplier-api/ws/websocket/2";//socketUrl=socketUrl.replace("https","ws").replace("http","ws");debugger;console.log(socketUrl);if(socket!=null){socket.close();socket=null;}socket = new WebSocket(socketUrl);//打開事件socket.onopen = function() {console.log("websocket已打開");//socket.send("這是來自客戶端的消息" + location.href + new Date());};//獲得消息事件socket.onmessage = function(msg) {console.log(msg.data);//發現消息進入 開始處理前端觸發邏輯};//關閉事件socket.onclose = function() {console.log("websocket已關閉");};//發生了錯誤事件socket.onerror = function() {console.log("websocket發生了錯誤");}}}function sendMessage() {if(typeof(WebSocket) == "undefined") {console.log("您的瀏覽器不支持WebSocket");}else {console.log("您的瀏覽器支持WebSocket");console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');}}
</script>
<body>
<p>【userId】：<div><input id="userId" name="userId" type="text" value="10"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
<p>【toUserId】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>【操作】：<div><a onclick="openSocket()">開啟socket</a></div>
<p>【操作】：<div><a onclick="sendMessage()">發送消息</a></div>
</body></html>
總結
以上是生活随笔為你收集整理的vue项目使用webSocket前后端建立连接推送消息的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 死磕技术！雷军：技术创新是小米生存和发展
- 下一篇： html5倒计时秒杀怎么做,vue 设