Vue与Node.js通过socket.io通信的示例
#一、Node中socket.io基础
1、是什么 Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式:
- HTML5中的WebSocket通信
- Flash中使用的WebSocket通信
- XHR轮询
- JSONP轮询
- Forever Iframe 在通信时,客户端与服务器端可以使用相同的API 2、怎么用 原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器 服务器端引入
var http=require('http')
var sio=require('socket.io')
var server=http.createServer((req,res)=>{
res.writeHead(200,{'Content-type':'text/html'})
res.end(fs.readFileSync('./snak.html'))
}).listen(8088)//创thhp建服务器
var socket=sio.listen(server)//监听http服务器
socket.on('connection',(socket)=>{//建立连接后的回调函数
})//这里的socket参数,是服务器端用于与客户端建立连接的scoket端口对象
客户端引入
<script src='/socket.io/socket.io.js'></script>
//js
var socket=io.connect()
发送接收消息 send 发送
socket.send('收到信息')
监听message接收消息
socket.on('message',(val)={ console.log(val) })
emit发送
socket.emit('news',data,(val1,val2...)=>{})
监听同样是事件接收
socket.on('news',(val)={ console.log(val) })
使用send发消息,要用‘message'接收,另一端会触发该事件. 使用emit发送,另一端触发同样的事件来接收。 广播消息 用于多个客户端与服务器端连接。服务器端使用sockets属性,向所用客户端发消息。或者使用用于与客户端建立连接的socket对象,该对象具有broadcast对象,代表所有与其他Socket.IO客户端建立连接的socket对象。
//服务器端
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
io.sockets.emit('login',name);
//socket.broadcast.emit('login',name)
})//欢迎加入全栈开发交流圈一起学习交流:864305860
//客户端
var socket=io.connect()
socket.emit('login',name)
二、Vue中使用socket.io 在项目目录下
npm install vue-socket.io
npm install socket.io-client
在main.js中引入
`import VueSocketio from` `'vue-socket.io'``;`
`import socketio from` `'socket.io-client'``;`
`Vue.use(VueSocketio,socketio(``'[http://localhost:8888/](http://localhost:8888/)'``));//与服务端链接`
Vue组件中
export default {
name: "NetList",
sockets: {
//不能改,j建立连接自动调用connect
connect: function() {
//与socket.io连接后回调
console.log("socket connected");
},
//服务端向客户端发送login事件
login: function(value) {
//监听login(后端向前端emit login的回调)
console.log(value)//欢迎加入全栈开发交流圈一起学习交流:864305860
}//面向1-3年前端人员
},//帮助突破技术瓶颈,提升思维能力
updated(){
//数据更新时,向服务器端发送事件
this.$socket.emit("compile"); //触发start
}
服务器端
var http = require('http');
var fs = require('fs');
var exec = require('child_process').exec;
var server = http.createServer(function (req, res) {
// console.log(req)
// console.log(res)
// fs.readFile('./index.html',function(error,data){//若根目录有index.html,访问地址,将显示index.html
// res.writeHead(200,{'Content-Type':'text/html'});
// res.end(data,'utf-8');
// });
}).listen(8888);//创建http服务
console.log('Server running ');
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
console.log('链接成功');
socket.on('compile', () => {
socket.emit('login', 'ok');//欢迎加入全栈开发交流圈一起学习交流:864305860
}); //面向1-3年前端人员
});//帮助突破技术瓶颈,提升思维能力
结语
感谢您的观看,如有不足之处,欢迎批评指正。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
三, 跨语言微服务框架 - Istio官方示例(自动注入.请求路由.流量控制.故障注入)
基础的Istio环境已经搭建完成,我们需要开始了解Istio提供作为微服务网格的各种机制,也就是本文标题的自动注入.请求路由.故障注入.流量切换,官方很给力的准备的实例项目也不需要大家自己编写demo来进行测试,那就来时跑跑看吧. 附上: 喵了个咪的博客:w-blog.cn Istio官方地址:https://preliminary.istio.io/zh Istio中文文档:https://preliminary.istio.io/zh/docs/ PS : 此处基于当前最新istio版本1.0.3版本进行搭建和演示 一. 自动注入(sidecar) 说到服务网格必然是侵入式的包裹着你的服务,在中间过程完成了一些列工作,那么就到了我们的第一个主题自动注入,大家在通过webui或者是kubectl创建的时候默认并不会触发Istio的容器注入,那么有以下几种方式可以让istio注入生效: 使用命令注入istioctl来创建容器 > istioctl kube-inject -f samples/sleep/sleep.yaml | kubectl apply -f - 开启name...
-
下一篇
浅谈Redux中间件的实践
最近项目前端开发框架采用React+Redux进行实现,但是,如何异步访问服务器端,以及想要在开发过程中进行状态树日志的输出,所以怎么才能解决这两个问题? 采用Redux中间件 为什么要使用中间件 在利用Redux进行状态管理时,用户在UI层面触发行为,一个action对象通过store.dispatch派发到Reducer进行触发,接下来Reducer会根据type来更新对应的Store上的状态树,更改后的state会触发对应组件的重新渲染。如下图所示。在这个流程中,action对象是一个同步的对象,是一个包含type字段的简单对象,但是在访问服务器时,由于浏览器是单线程的,不会一遍渲染组件一遍等待服务器返回的结果,因此我们需要设计一种异步访问服务器的方法来实现与服务器端的正常通信。 中间件介绍 在Redux架构下,一个action对象在通过store.dispatch派发,在调用reducer函数前,会先经过一个中间件环节,如下图所示。 从上图可以看出,在一个Redux架构中可以用多个中间件,这些中间件一起组织处理请求的“管道”。一个中间件是一个独立的函数,可以组合使用,中间件有一...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- 面试大杂烩
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果