1)HTTP无法轻松实现实时应用：

1、 HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。

---

2、我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如Ajax）。但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。

2)以往解决实时应用方法

1、 长轮询：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。

---

2、长连接：客户端只请求一次，但是服务器会将连接保持，不会返回结果（想象一下我们没有写res.end()时，浏览器一直转小菊花）。服务器有了新数据，就将数据发回来，又有了新数据，就将数据发回来，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。

3)WebSocket协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端了。

WebSocket的原理非常的简单：利用HTTP请求产生握手，HTTP头部中含有WebSocket协议的请求，所以握手之后，二者转用TCP协议进行交流（QQ的协议）。现在的浏览器和服务器之间，就是QQ和QQ服务器的关系了。

---

所以WebSocket协议，需要浏览器支持，更需要服务器支持。
● 支持WebSocket协议的浏览器有：Chrome 4、火狐4、IE10、Safari5
● 支持WebSocket协议的服务器有：Node 0、Apach7.0.2、Nginx1.3

4)vue3.x+typescript+node实现socket通信

前端：

<template>
  <div>
    <div>
      <input type="text" v-model="msg" />
      <button type="button" @click="handelMsg">提交</button>
    </div>
    <div class="msg_lis">
      <div
        class="item"
        :class="{ active_user: userName === item.userName }"
        v-for="item of list"
        :key="item.id"
      >
        <dl>
          <dt>{{ item.createTime }}</dt>
          <dd>
            <span>{{ item.userName }}：</span>{{ item.msg }}
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
interface IListItem {
  id: number;
  createTime: string;
  msg: string;
  userName: string;
}
interface IData {
  msg: string;
  list: IListItem[];
  userName: string;
}
import { reactive, toRefs } from "vue";
import hookSocket from "../hook/hook_socket";
export default {
  setup() {
    const data: IData = reactive({
      list: [],
      msg: "",
      userName: localStorage.getItem("userName") || "",
    });
    const ws = hookSocket((a: MessageEvent) => {
      if (!a.data) return;
      data.list.push(<IListItem>JSON.parse(a.data));
    });
    const handelMsg = () => {
      if (data.msg == "") {
        alert("请输入消息");
        return;
      }
      ws.send(
        JSON.stringify(<IListItem>{
          id: new Date().getTime(),
          createTime: new Date().toLocaleString().replace(/\//g, "-"),
          msg: data.msg,
          userName: data.userName,
        })
      );
      data.msg = "";
    };
    return {
      ...toRefs(data),
      handelMsg,
    };
  },
};
</script>

<style>
.active_user {
  color: red;
}
</style>

import { WS_URL } from '../config/ws_config'
//const WS_URL = `ws://localhost:8000`;
export default function hookSocket(handleMsg: (ev: MessageEvent) => void) {
    const WS = new WebSocket(WS_URL);//浏览器自带WebSocket对象
    const init = () => {
        bindEvent();
    }
    init();
    function bindEvent() {
        WS.addEventListener('open', function (event) {
            console.log(`WebSocket Open`);
        }, false)
        WS.addEventListener('message', handleMsg, false)
        WS.addEventListener('close', function () { console.log(`WebSocket close`); }, false)
        WS.addEventListener('error', function () { console.error(`WebSocket error`); }, false)
    }
    return WS;
}

后端：

使用nodeman开启服务，并安装ws模块

const WebSocket = require('ws');
; ((ws) => {
    const server = new ws.Server({ port: 8000 });
    const init = () => {
        bindEvent();
    }
    init();
    function bindEvent() {
        server.on('open', function () {
            console.log(`WebSocket open`);
        })
        server.on('close', function () { console.log(`WebSocket close`); })
        server.on('error', function () { console.log(`WebSocket error`); })
        server.on('connection', handleConnection)
    }
    function handleConnection(ws) {
        console.log('WebSocket Connection');
        ws.on('message', handleMessage)
    }
    function handleMessage(msg){
        //获取每个链接的客户端 把消息广播出去。
        server.clients.forEach(c=>{
            c.send(msg);
        })
    }
})(WebSocket)