沉寂了一周，我开发了一个聊天室

前言

最近一周没有发文章了，我在这里向大家说一声抱歉。今天，我们来从零开始开发一款聊天室。好，我们现在就开始。
了解WebSocket

开发聊天室，我们需要用到WebSocket这个网络通信协议，那么为什么会用到它呢？

我们首先来引用阮一峰大佬的一篇文章一段话：

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

我们来借用MDN网站上的官方介绍总结一下：

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API，您可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
WebSocket特点

服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），即ws对应http，wss对应https。服务器网址就是 URL。即ws://www.xx.com或wss://www.xx.com

WebSocket客户端常用API

WebSocket 对象提供了用于创建和管理 WebSocket连接，以及可以通过该连接发送和接收数据的 API。

使用WebSocket()构造函数来构造一个WebSocket 。
属性

WebSocket.onopen

用于指定连接成功后的回调函数。

WebSocket.onmessage

用于指定当从服务器接受到信息时的回调函数。

WebSocket.onclose

用于指定连接关闭后的回调函数。

WebSocket.onerror

用于指定连接失败后的回调函数。

方法

WebSocket.close()

关闭当前链接。

WebSocket.send(data)

客户端发送数据到服务器，对要传输的数据进行排队。
客户端举例

// Create WebSocket connection.
const socket = new WebSocket(‘ws://localhost:8080’); // 这里的地址是服务器的websocket服务地址

// Connection opened
socket.onopen = function(evt) {
console.log(“Connection open …”);
ws.send(“Hello WebSockets!”);
};

// Listen for messages
socket.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
socket.close();
};

// Connection closed
socket.onclose = function(evt) {
console.log(“Connection closed.”);
};

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118721433