了解websocket和简单示例

什么是websocket

websocket是一种网咯通信协议,它允许服务器主动向客户端发送消息,客户端也可以主动向服务器发送消息。

websocket解决了什么问题

http协议是一个由客户端发起请求再到服务端响应的过程,并且通信只能由客户端发起。长久以来人们想要关注服务器实时的数据，就只能通过“轮询”的方式让浏览器隔个几秒就发送一次请求。但这样显然会浪费服务器资源，而且也不是实时的数据。

于是websocket应运而生，一旦建立websocket链接之后，之后的交互数据都不需要再发送HPPT request了。这就好比客户端和服务端已经拨通的电话,之后的交流省去的反复拨打电话的过程。

客户端使用websocket简单示例

// 通过构造函数websocket返回一个新的websocket对象
// url 必须是一个websocket协议的绝对路径,稍后会讲服务端的代码
const ws = new WebSocket('ws://localhost:3000');

// 事件:当前连接已经准备好了,readyState = 1 时调用
ws.addEventListener('open', (event) => {});
// 事件:接收来自服务器的消息
ws.addEventListener('message', (message) => {});
// 方法:发送消息给服务器
ws.send('Hello Websocket');
// 方法:关闭链接 参数详见官方文档
ws.close(code,reason);

服务端实现websocket

// 服务端的实现没有任何语言的限制 只要符合websocket协议既可
// 这里使用的是nodejs-websocket 现成的库非常适合不懂网络协议的小白练手

// 安装 npm install nodejs-websocket

const ws = require('nodejs-websocket');

const server = ws.createServer((conn) => {
    console.log('new connection');
    conn.on('text', (Str) => {
        console.log('服务端接收数据:', Str);
        setTimeout(() => {
            conn.sendText('服务器给你发来消息', () => {
                console.log('成功发送')
            })
        }, 2000)
    })
    conn.on('error', (err) => { 
        console.log(err)
    })

}).listen(3000)

// 客户端 ---------------------------------------
const ws = new WebSocket('ws://localhost:3000');

ws.addEventListener('open', (event) => {
            console.log(event)
            ws.send('Hello Server')
        })
ws.addEventListener('message', (msg) => {
            console.log(msg)
        })

运行代码不出意外你将看到

服务端