Vue与Node.js经过socket.io通讯的示例

#1、Node中socket.io基础

一、是什么 Socket.IO类库，是在服务器和浏览器之间提供一个共享接口，其能够用于实现如下几种通讯方式：

• HTML5中的WebSocket通讯
• Flash中使用的WebSocket通讯
• XHR轮询
• JSONP轮询
• Forever Iframe 在通讯时，客户端与服务器端可使用相同的API 二、怎么用 原理：建立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)

2、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年前端人员
});//帮助突破技术瓶颈，提高思惟能力

结语

感谢您的观看，若有不足之处，欢迎批评指正。