WebSocket简介-第一章

我不是女神ヾ 2022-11-22 00:11 212阅读 0赞

### 通过本专栏你能学到： ###

> 1、WebSocket基础知识
> 
> 2、Nodejs+WebSocket创建后台服务器功能
> 
> 3、Vue项目搭建，简单组件封装
> 
> 4、Vue + Vuex + LocalStorage状态持久化

### 1. WebSocket是什么？ ###

如果说ajax像手机发短信一样，发送信息，获取信息，那么websocket技术则是打电话这样。WebSocket要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

在WebSocket以前你可能会使用ajax进行轮询(包括现在有些没有集成WebSocket的软件)，这就造成了服务器的多重压,大量消耗服务器带宽和资源。

面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并实现真正意义上的实时推送。

WebSocket协议本质上是一个基于TCP的协议，它由通信协议和编程API组成，WebSocket能够在浏览器和服务器之间建立双向连接， 以基于事件的方式，赋予浏览器实时通信能力。既然是双向通信，就意味着服务器端和客户端可以同时发送并响应请求，而不再像HTTP的请求和响应。

### 2. WebSocket 事件 ###

1、Socket.onopen 连接建立时触发

2、Socket.onmessage 客户端接收服务端数据时触发

3、Socket.onerror 通信发生错误时触发

4、Socket.onclose 连接关闭时触发

### 3. WebSocket 方法 ###

1、Socket.send() 使用连接发送数据

2、Socket.close() 关闭连接

### 4. Nodejs + WebSocket 示例 ###

这里我们先安装一下WebSocket模块：

npm i nodejs-websocket -S

新建一个index.js作为服务端：

客户端

if(window.WebSocket){ 
     var ws = new WebSocket('ws://localhost:8001');
     ws.onopen = function(e){ 
     console.log("连接服务器成功");
     // 向服务器发送消息
     ws.send("what`s your name?");
     }
     ws.onclose = function(e){ 
     console.log("服务器关闭");
     }
     ws.onerror = function(){ 
     console.log("连接出错");
     }
     // 接收服务器的消息
     ws.onmessage = function(e){ 
     let message = "message:"+e.data+"";
     console.log(message);
     } 
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]  
这样，客户端发送：`ws.send("whats your name?");`，服务端回复：`conn.sendText("My name is Web Xiu!");`，只要连接不断开，就可以一直通信。

备注：本文由 [web秀][web] 作者：Javan 发表

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/13800285813f4d9daf384e8cac765e97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d13d62851dda48dabbab21a3e2c24af2.png
[web]: http://www.javanx.cn/special/websocket/