首先关注后端代码:
(1) 安装socket.io插件
npm install express
npm install socket.io
(2) 在server.js中写入如下代码:
参考网址:https://socket.io/docs/#Sending-and-receiving-events
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(8080);
//警告:app.listen(80)在这里不起作用!
app.get('/',function(req,res) {
res.sendFile(_dirname + '/ index.html');
});
io.on('connection',function(socket) {
socket.emit('news',{ 'hello':'world' });
socket.on('my other event',function(data) { console .log(data) })
});
(3)启动程序
node server.js
其次是前端代码:
(1)在vue中安装如下模块:
npm install vue-socket.io --save
(2)main.js中加入如下代码:
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://localhost:8080',
}))
在页面中加入如下代码:
sockets:{
connection(data){
console.log(data);
},
news(data) {
//这个方法的名称由后端定义
console.log(data);
},
},
一个socket的交互小实例就简单搭建完啦啦啦啦啦啦