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)
})

//客户端
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\');
 }); 
});

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