HTML-WebSocket

webSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

客户端

首先先new WebSocket实例
再通过opopen事件来发送消息

javascript

 methods: {
        outputMessage() {
            var ws = new WebSocket("ws://localhost:3000/ws/chat");
            let _this = this;
            ws.onopen = () => {
                // 点击发送按钮，将文本框的信息发送服务端
                ws.send(_this.data);
            };
            // this.webSocket();
        },
        webSocket() {
            var ws = new WebSocket("ws://localhost:3000/ws/chat");
            let _this = this;

            ws.onmessage = function(event) {
                console.log(event);
                _this.message.push(event.data);
            };
        }
},
mounted() {
    this.webSocket();
}

服务端

这里需要使用ws模块，需要使用npm来下载
当客户端每send一次服务端就会响应一次
当响应之后我们也可以使用ws.send()的方式返回数据给前端
当关闭服务器时则连接结束

javascript

const Koa = require("koa");
const ws = require("ws");
const app = new Koa();

let server = app.listen(3000, () => {
    console.log("running...")
});

let WebSocketServer = ws.Server;
let wss = new WebSocketServer({
    server: server
})

wss.broadcast = function (data) {
    wss.clients.forEach(function (client) {
        client.send(data);
    });
};

wss.on("connection", function (ws) {
    ws.wss = wss;
    ws.on('message', function (message) {
        console.log(message);
        this.wss.broadcast(message);
    });

})