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前后端建立连接推送消息相关推荐

服务器如何向前端页面推送消息,后端向前端推送消息
SpringBoot+WebSocket集成什么是WebSocket? 为什么需要 WebSocket? 前言 maven依赖 WebSocketConfig WebSocketServer 消息推 ...
Websocket实现Java后台主动推送消息到前台
写在前面需求: 项目测试, 缺少用户登录失败给admin推送消息, 想到这个方式, 当用户登录失败时, admin用户会在页面看到咣咣乱弹的alert. 正文 pom.xml <!-- web ...
springboot+Vue项目-微博留言(前后端分离,跨域)
所用技术数据库:mysql 后台框架:springboot,mybatis plus 前台框架:Vue 实体类:lombok 异步:axios 一丶微博留言后端小贴士:约定>配置>编码 ...
websocket 前后端交互实战
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并 ...
解答网友提问 | 使用VS2022快速生成React/Angular/Vue.js + Web API前后端集成项目
前言上次发表了<一键生成Vue.js + Web API前后端集成项目>后,有多位网友来问,有不有其他的前后端集成模板: 实际上,VS2022没有提供前后端集成项目模板. 但是,使用VS ...
一键生成Vue.js + Web API前后端集成项目
前言默认情况下,Visual Studio提供了"基于Vue.js Web 应用程序"项目模板,可以生成Vue.js前端项目. 你需要另外创建Web API项目,调试时需要同时启 ...
Vue前端与Django后端实现前后端分离连接
1.前端部分前端要触发一个事件,使得前端将信息发送给后端.例如一个登录事件,用户输入账号密码,点击登录按钮,即可将前端输入的信息发送给后端.该按钮绑定了一个事件,该事件放在methods配置项里边. ...
基于Vue和Django搭建前后端分离项目
前言最近公司要做一个系统,需要前后端分离,后端使用Django,前端使用Vue,因为之前主要做的是后端开发,前端只会写一写简单的,Vue只会绑定数据,至于Vue怎么与Django结合还是第一次接触, ...
【websocket前后端交互】vue-springboot实现websocket前后端交互链接，websocket心跳重连，包含前后端代码，复制即可用【详细解释版本】
前言: 还是老规矩,一步步的教大家如何建立前后端的 websocket 链接,并能完成互相传送数据的简单功能.由于网上找了半天发现很多帖子都是东一句西一句的,要不就是写的没什么注释和解释,导致我这个前 ...

vue项目使用webSocket前后端建立连接推送消息

vue项目使用webSocket前后端建立连接推送消息相关推荐

最新文章

热门文章