WebSocket 是 HTML5 最先供应的一种在单个 TCP 衔接上举行全双工通信的协定。

WebSocket 使得客户端和服务器之间的数据交流变得越发简朴，许可服务端主意向客户端推送数据。在 WebSocket API 中，浏览器和服务器只须要完成一次握手，两者之间就直接可以竖立持久性的衔接，并举行双向数据传输。

如今，许多网站为了完成推送手艺，所用的手艺都是 Ajax 轮询。轮询是在特定的的时候距离（如每1秒），由浏览器对服务器发出HTTP要求，然后由服务器返回最新的数据给客户端的浏览器。这类传统的形式带来很明显的瑕玷，即浏览器须要不停的向服务器发出要求，但是HTTP要求可以包括较长的头部，个中真正有用的数据可以只是很小的一部分，明显如许会糟蹋许多的带宽等资本。

HTML5 定义的 WebSocket 协定，能更好的节约服务器资本和带宽，而且可以更及时地举行通信。

浏览器经由过程 JavaScript 向服务器发出竖立 WebSocket 衔接的要求，衔接竖立今后，客户端和服务器端就可以经由过程 TCP 衔接直接交流数据。

当你猎取 Web Socket 衔接后，你可以经由过程 send() 要领来向服务器发送数据，并经由过程 onmessage 事宜来接收服务器返回的数据。

DEMO以下

// client side file

let socket = new WebSocket('ws://localhost:9999');

// 当衔接胜利实行回调函数
socket.onopen = function () {
  console.log('客户端衔接胜利');
  
  // 向服务器发送一个音讯
  socket.send('这是客户端发给服务器的音讯');
}

// 绑定事宜是用加属性的体式格局
socket.onmessage = function (res) {
  console.log('收到服务器端的响应是', res);
}

// server side file
/* npm i ws -S */
/* 用ws模块启动一个websocket服务器,监听 9999 端口 */
let WebSocketServer = require('ws').Server; 
let wsServer = new WebSocketServer({port: 9999});

wsServer.on('connection', socket=>{
    console.log('服务器衔接胜利');
    socket.on('message', msg=>{
        console.log('从客户端接收到的信息为'+msg);
        socket.send('这是从服务器发送到客服端的信息');
    })
})

简朴模仿智能客服谈天

<template>
  <div class="wrap">
    <ul>
      <li v-for="(item, index) in dialogs" :key="index">
        <p :class="item.self ? 'fr': 'fl'">{{item.sendContent || item.acceptContent}}</p>
      </li>
    </ul>
    <div class="send-cont">
      <input v-model="sendCont">
      <input type="button" @click="send" value="发送">
    </div>
  </div>
</template>

<script>
let socket = new WebSocket("ws://localhost:9999");
export default {
  data() {
    return {
      dialogs: [],
      sendCont: "",
      isConnect: false
    };
  },
  mounted() {
    socket.onopen = () => {
      this.isConnect = true;
    };
  },
  methods: {
    send() {
      if (this.isConnect) {
        console.log("客户端衔接胜利");
        // 向服务器发送一个音讯
        socket.send(this.sendCont);
        this.dialogs.push({ sendContent: this.sendCont, self: true });
        // 绑定事宜是用加属性的体式格局
        socket.onmessage = res => {
          setTimeout(() => {
            this.dialogs.push({ acceptContent: res.data });
          }, Math.random() * 2000);
        };
      }
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
li::before {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.wrap {
  position: relative;
  width: 380px;
  margin: auto;
  height: 600px;
  background-color: #eee;
  padding: 10px;
}
.wrap ul {
  overflow: auto;
  height: 550px;
}
li {
  list-style: none;
  margin: 2px;
}
li:nth-child(even) p {
  background-color: rgb(86, 107, 177);
}
li p {
  font-size: 20px;
  font-family: "Microsoft Yahei", serif, Arial, Helvetica, sans-serif;
  border-radius: 6px;
  padding: 4px;
  margin: 2px 4px;
  white-space: wrap;
  text-align: left;
}
li p.fr {
  background-color: rgb(61, 185, 30);
}

.send-cont {
  position: absolute;
  bottom: 10px;
  z-index: 999;
  width: 98%;
  margin: auto;
}
.send-cont input {
  display: inline-block;
  outline: none;
  border: 2px solid #080;
  border-radius: 6px;
  line-height: 30px;
  font-size: 16px;
  text-align: left;
}
.send-cont input:first-child {
  width: 70%;
}
.send-cont input[type="button"] {
  width: 20%;
  background-color: #080;
  color: #fff;
  text-align: center;
  padding: 1px;
}
</style>

const contents = ['你好', 'hi', 'hello', 'nice to meet you', 'how are you', 'how do you do']

let WebSocketServer = require('ws').Server; 
let wsServer = new WebSocketServer({port: 9999});

wsServer.on('connection', socket=>{
    console.log('服务器衔接胜利');
    socket.on('message', msg=>{
        console.log('从客户端接收到的信息为'+msg);
        socket.send(contents[parseInt(Math.random()*contents.length)]);
    })
})