Vue Node vue-socket.io 联合使用 简易聊天程序

之前用goEasy写过聊天程序，现在想试试websocket来结合vue玩玩，所以有今天这个随笔

安装必要包

//node.js

npm i socket.io --save

//vue

npm i vue-socket.io --save
npm i socket.io-client --save

配置node.js 创建目录/文件 server/app.js

新增packjson配置，配置后npm run server即可启动

//如果只想要一个命令即启动node服务器，也启动socket，可以把server/app.js引入总的app.js中  使用npm start时就会启动所有服务啦!
//app.js

var socket  = require('./server/app');

新建app.js内容

var http = require('http');
var fs = require('fs');
var exec = require('child_process').exec;
var server = http.createServer().listen(8888);//创建http服务
console.log('Server running ');
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
    console.log('连接成功！！！')
    socket.on('test', (data) => {//这里的test是供前端请求的方法名
        socket.broadcast.emit('test', {//给除了自己以外的客户端广播消息
            nickname: data.nickName,
            id: socket.id,
            massage: data.val
        });
    });
});

Test.vue文件内容

main.js加入代码

import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(new VueSocketio({
  connection: 'http://127.0.0.1:8888/'
}))

最后效果

总结： 
          1.必要步骤node端开启长连接，并可访问
          2.vue正确调用连接方法
          3.自己写入必要的实现逻辑

最后推荐一篇socket功能性文章

转载于:https://www.cnblogs.com/yzyh/p/10143972.html