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

前端之家收集整理的这篇文章主要介绍了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端口对象

客户端引入

//js var socket=io.connect()

发送接收消息

send 发送

监听message接收消息

emit发送

{})

监听同样是事件接收

使用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

在项目目录下

在main.js中引入

链接

Vue组件中

自动调用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'); }); });

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

猜你在找的Node.js相关文章