Vue+Websocket＜简单实现聊天功能＞

此篇文章是针对Websocket的简单了解和应用，利用Nodejs简单搭建一个服务器加以实现。

首先创建一个vue项目，会vue的我就不必多说了；
然后再创建一个server文件夹，在终端上打开该文件夹，输入vue init（一直敲 "回车" 键），最后再建一个server.js文件，如下图

代码如下：

server.js
在server文件终端下 npm install --s ws

var userNum = 0; //统计在线人数
var chatList = [];//记录聊天记录
var WebSocketServer = require('ws').Server;
wss = new WebSocketServer({ port: 8181 }); //8181 与前端相对应
//调用 broadcast 广播，实现数据互通和实时更新
wss.broadcast = function (msg) {
    wss.clients.forEach(function each(client) {
        client.send(msg);
    });
};
wss.on('connection', function (ws) {
    userNum++;//建立连接成功在线人数 +1
    wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //建立连接成功广播一次当前在线人数
    console.log('Connected clients:', userNum);
    //接收前端发送过来的数据
    ws.on('message', function (e) {
        var resData = JSON.parse(e)
        console.log('接收到来自clent的消息：' + resData.msg)
        chatList.push({ userId: resData.userId, content: resData.msg });//每次发送信息，都会把信息存起来，然后通过广播传递出去，这样此每次进来的用户就能看到之前的数据
        wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg })); //每次发送都相当于广播一次消息

    });
    ws.on('close', function (e) {
        userNum--;//建立连接关闭在线人数 -1
        wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList }));//建立连接关闭广播一次当前在线人数
        console.log('Connected clients:', userNum);
        console.log('长连接已关闭')
    })
})
console.log('服务器创建成功')

启动服务 node xxx.js

 socket.vue(前端页面)

 10.12.16.27:8181是我本地的IP地址(默认是 localhost )，你可以改成你自己的

然后npm run dev，就可以实现局域网聊天了，有无线的话可以用手机连着无线访问你的IP地址访问，没的话可以试下多开几个窗口，也是能看到效果的！！

进入聊天室时和发送信息时服务器的打印日志