Vue与Node.js通过socket.io通信的示例代码

一、Node中socket.io基础

1、是什么

Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式:

  1. HTML5中的WebSocket通信
  2. Flash中使用的WebSocket通信
  3. XHR轮询
  4. JSONP轮询
  5. Forever Iframe

在通信时,客户端与服务器端可以使用相同的API

2、怎么用

原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器

服务器端引入

{ 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端口对象

客户端引入

rush:js;"> //js var socket=io.connect()

发送接收消息

send 发送

rush:js;"> socket.send('收到信息')

监听message接收消息

rush:js;"> socket.on('message',(val)={ console.log(val) })

emit发送

{})

监听同样是事件接收

rush:js;"> socket.on('news',(val)={ console.log(val) })

使用send发消息,要用‘message'接收,另一端会触发该事件.

使用emit发送,另一端触发同样的事件来接收。

广播消息

用于多个客户端与服务器端连接。服务器端使用sockets属性,向所用客户端发消息。或者使用用于与客户端建立连接的socket对象,该对象具有broadcast对象,代表所有与其他Socket.IO客户端建立连接的socket对象。

{ io.sockets.emit('login',name); //socket.broadcast.emit('login',name) })

//客户端
var socket=io.connect()
socket.emit('login',name)

二、Vue中使用socket.io

在项目目录下

rush:bash;"> npm install vue-socket.io npm install socket.io-client

在main.js中引入

rush:js;"> import VueSocketio from 'vue-socket.io'; import socketio from 'socket.io-client'; Vue.use(VueSocketio,socketio('http://localhost:8888/'));//与服务端链接

Vue组件中

rush:js;"> 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) } },updated(){ //数据更新时,向服务器端发送事件 this.$socket.emit("compile"); //触发start }

服务器端

{ console.log('链接成功'); socket.on('compile',() => { socket.emit('login','ok'); }); });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

这篇文章主要介绍“基于nodejs的ssh2怎么实现自动化部署”的...
本文小编为大家详细介绍“nodejs怎么实现目录不存在自动创建...
这篇“如何把nodejs数据传到前端”文章的知识点大部分人都不...
本文小编为大家详细介绍“nodejs如何实现定时删除文件”,内...
这篇文章主要讲解了“nodejs安装模块卡住不动怎么解决”,文...
今天小编给大家分享一下如何检测nodejs有没有安装成功的相关...