用vue2来进行前后端websocket连接，实现简易聊天室

# 聊天室

  - 前端

    1. Login

       用户名输入 / 进入聊天室的按钮

       input username(6) -> localstorage -> enter the chatting room

    2. Home

       列表 / 消息输入框 / 发送按钮

       localstorage -> username / message / id / 消息时间 -> 后端socket服务

    open

    close

    error

    message  接收广播来的数据

  - 后端

       接收 -> 消息数据 -> 广播给所有连接到socket服务的客户端

    open

    close

    error

    connection

       message 接收客户端发送的消息数据 -> 广播

前端代码：

聊天框页面

进入聊天框的页面

后端代码：

const Ws = require('ws');

;((Ws) => {
  
  const server = new Ws.Server({ port: 8000 });


  const init = () => {
    bindEvent();
  }

  function bindEvent () {
    server.on('open', handleOpen);
    server.on('close', handleClose);
    server.on('error', handleError);
    server.on('connection', handleConnection);
  }

  function handleOpen () {
    console.log('open');
  }

  function handleClose () {
    console.log('close');
  }

  function handleError () {
    console.log('error');
  }

  function handleConnection (ws) {
    console.log('connection');

    ws.on('message', handleMessage);
  }

  function handleMessage (msg) {
    server.clients.forEach((c) => {
      c.send(msg);
    })
    console.log(msg)
  }

  init();
})(Ws);