node+socket+vue的简单交互实例

首先关注后端代码:

(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的交互小实例就简单搭建完啦啦啦啦啦啦