websocket实践

1.什么是websocket

1）首先websocket和http一样，是一种网络通信协议，来自HTML5的特性；

2）他可以使客户端和服务端进行双工通信，简单来说就是：比如我们熟悉的http协议，由客户端发起请求，通过三次握手，与服务端建立联系，并发送数据，获得响应，这是单向的，而websocket实现了服务端向客户端主动发送数据。

3）只要不主动切断联系，服务端的数据就可以一直向客户端输送，场景如：智慧交通交通系统，例如有车闯红灯了，服务端就会发送数据，在客户端发出报警信息，还有一些智慧工厂，最简单的还是我们的聊天系统，对方发送的消息可以不通过你的发起就能发送给你，这样的例子还很多。

PS：详细的学习内容自行百度推荐一个

WebSocket - Web API 接口参考 | MDN

2.使用

碰到的机会不是很多，我遇到的所有场景都是和报警或者网站告警有关系，下面就使用原生的实现：

// 首先判断浏览器是否支持
if ('Websocket' in window) {
    const ws = new Websocket(url);
    // 连接建立好之后的回调
    ws.onopen = (event) => {
        console.log("WebSocket is open now.");
        // 传送一些后台需要的数据（string类型或者二进制文件图片等数据）
        ws.send('') 
    };
    // 后台返回的数据
    ws.on('message', (event) => {
        const res = JSON.parse(event.data);
        console.log(res);
    })
    // 关闭连接
    ws.close();
} else {
    // 浏览器不支持
}

上面代码的注释就是执行步骤，有几个点特别说一下：

1）open和message事件专门用两种写法写的，都是可行的，open是建立连接的回调，一般都在这发送信息给后台，message是后台传数据回来的方法，这写是和后台约定好的，一般都是这样；

2）最后记得关闭close()，websocket中方法直接执行的有两个，一个是send一个就是close；

3）传参过去基本都是字符串，message返回参数event.data;

3.实际开发中遇到的一些问题

首先，问题是我自己对websocket特性的不熟悉导致的，因为项目使用nginx代理，而之前调用websocket的时候都是直接写的链接，所以在想能不能代理，结果却是看到了这句话：

webSocket 没有同源限制，客户端可以与任意服务器通信

这句意味着根本不需要考虑跨域的问题，直接填写url全部就好；

然后还有一个在本地调用的时候ws://开头可以使用，而上了生产环境就不行了，这个请教了后台同事，这个就是和你的本身浏览器地址有关，需要动态更改，基础的就是这样，先写这些。

PS：websocket还有很多方法和几个常用库，都比较实用，可以试一试。