一、Node中socket.io基础
1、是什么
Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式:
- HTML5中的WebSocket通信
- Flash中使用的WebSocket通信
- XHR轮询
- JSONP轮询
- 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');
});
});