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端口对象
  • 客户端引入

//js
var socket=io.connect()
  • 发送接收消息
  1. send 发送
    socket.send(‘收到信息’)
  2. 监听message接收消息
    socket.on(‘message’,(val)={ console.log(val) })
  3. emit发送
    socket.emit(‘news’,data,(val1,val2…)=>{})
  4. 监听同样是事件接收
    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)
})

//客户端
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/'));//与服务端链接

  • 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)
    }
  },
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');
    });   
});


作者:fenerchen
链接:https://www.jianshu.com/p/924b958b0fff
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(vue,socket.io)