js websocket 前后端基础实现

前端

// datawsUrl: 'ws://127.0.0.1:8080',websocket: null// 初始化 websocket
initWebSocket () {try {if (this.websocket && this.websocket.readyState == 1) {this.stopWebSocket()}this.websocket = new WebSocket(this.wsUrl);this.websocket.onopen =  (evt) => {alert('open')};this.websocket.onclose =  (evt) => {alert('DISCONNECTED')};this.websocket.onmessage =  (evt) => {console.log(evt.data);};this.websocket.onerror =  (evt) => {console.log(evt.data )};} catch (exception) {console.log(exception )}},// 停止stopWebSocket(){if (this.websocket){this.websocket.close();}},// 发送信息sendMessage(data){this.websocket.send(data);}

服务端

创建一个文件夹 websocket-server
终端执行cd命令进入到websocket-server文件夹
执行yarn add nodejs-websocket或npm install nodejs-websocket,用以安装nodejs的websocket模块

   npm install nodejs-websocket

待模块安装完成后，在当前目录新建app.js文件，内容如下

var ws = require("nodejs-websocket");const port = 8080 var server = ws.createServer((conn)=>{console.log('链接成功')conn.on("close", ()=>{console.log('close!');})conn.on("error", ()=>{console.log('error!');})conn.on("open", ()=>{console.log('open!');})conn.on("text", (data)=>{console.log(data);conn.send(data)})
})server.listen(port, ()=>{console.log("run...  ", port)
})

修改package.json中的scripts

"scripts": {"start": "node app.js"},

执行 npm start 启动服务

npm start

js websocket 前后端基础实现相关推荐

mock模拟接口测试 vue_vue+mock.js实现前后端分离
之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范 ...
vue 新建的页面如何访问_Vue.js—实现前后端分离架构中前端页面搭建（四）（完）...
[Vue.js实现前后端分离架构中前端页面搭建] 二十.实现服务端登录业务前提:已经有单机版Eureka,端口8761.启动开Eureka 1. 新建父项目新建backend_parent. 为了 ...
【websocket前后端交互】vue-springboot实现websocket前后端交互链接，websocket心跳重连，包含前后端代码，复制即可用【详细解释版本】
前言: 还是老规矩,一步步的教大家如何建立前后端的 websocket 链接,并能完成互相传送数据的简单功能.由于网上找了半天发现很多帖子都是东一句西一句的,要不就是写的没什么注释和解释,导致我这个前 ...
WebSocket前后端联调
WebSocket前后端联调问题简介最近由于要进行态势推演的开发,该功能需要实现多个websocket的管理,因此,在进行开发时,学习了关于前后端联调的一些细节,记录一下.该文章主要描述如何高效 ...
Spring Boot + Vue.js 实现前后端分离（附源码）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者: 梁小生0101 链接:juejin.im/post/5c6 ...
Nginx+Vue.js+Tornado前后端分离架构环境实践（1）
基于Python构建前后端分离服务架构实践,其中Web服务为Nginx,前端采用VUE组件,后端Web服务采用Tornado,数据库使用文档型MongoDB,服务协议主要为restfull. 1. N ...
ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
java使用websocket前后端通信实现
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. WebSocket是客户端和服务器端的一个通信,WebSocket分为客户端和服务端,所以我 ...
图解基于 Node.js 实现前后端分离 - CSDN博客
因为会上出了个意外,ppt图片全部丢失,只好对着白板跟大家交流了半个多小时.由于我做演讲不喜欢写太多的文字,没有图片的情况下讲漏了一些内容.这篇文章是我在会上分享内容对照ppt进行地整理. 基本介绍 ...

js websocket 前后端基础实现

前端

服务端

js websocket 前后端基础实现相关推荐

最新文章

热门文章