Web Sockets简单使用这是我参与8月更文挑战的第4天，活动详情查看： 8月更文挑战 Web Sockets we

这是我参与8月更文挑战的第4天，活动详情查看： 8月更文挑战

Web Sockets

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

websockets语法

var aWebSocket = new WebSocket(url [, protocols]);

参数

url

要连接的URL；这应该是WebSocket服务器将响应的URL。必须输入绝对url

protocols

一个协议字符串或者一个包含协议字符串的数组。

和http协议的不同： HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

WebSocket被建立，我们就可以监听socket的事件：

事件	发生情况
open	连接已建立
message	在接受到消息时触发
error	在发生错误时触发，连接不能持续
close	连接关闭时触发
send	发送消息使用

1.创建一个Web Sockets

let socket = new WebSocket(url);

实例化后，浏览器就会立即创建连接，

websocket也有表示自己状态的属性，如下: |---|---| | OPENING(0)| 正在建立连接| | OPEN(1)| 已建立连接 | | CLOSING(2)| 正在关闭连接| | CLOSE(3)| 已经关闭连接|

要关闭socket可以在任意时候调用close()方法 socket.close()

调用close()后，状态值变为2，关闭之后变为3

2.发送和接受数据

WebSocket打开之后就可以发送接受数据,发送使用

let socket = new WebSocket(url);
socket.send('hello word');

接受数据

socket.onmessage = function(event) {
 let data =  event.data;
};

WebSocket只能通过连接发送简单的数据，负责的数组需要对数据进行序列化处理，与通过send()发送到服务端的数据一样，返回的数据也是也是字符串。如果你想要其他格式的数据格式，需要你进行手动解析。

3.其他事件

open 成功建立连接时触发
error 在发生错误时触发，连接不能持续
close 关闭连接时触发

大概了解后，我们可以简单的写个demo来实现长连接通信，这里使用node搭建服务：

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8800 });
wss.on('connection', function (ws) {
 console.log('client connected');
 ws.on('message', function (message) {
   console.log(message);
   ws.send("服务端接受信息后，返回");
 });
})

WebSocket前端代码；

<button>提交</button>
let url = 'ws://localhost:8800/ws'
let socket = new WebSocket(url);

// send message from the form
document.getElementsByTagName("button")[0].onclick = function(){
   socket.send('hello word');
}

// handle incoming messages
socket.onmessage = function(event) {
  console.log(event);
};

我们点击看看执行结果，结果如图:

屏幕截图 2021-08-04 171845.png

点击提交后，后端返回数据，返回数据是我们固定写死的，

我们看看node后台结果：

屏幕截图 2021-08-04 172016.png

接收到了前端传递过去的数据后返回给前端数据。

接下来我们处理一下前端穿过来的数据

我们把前端传过去的数据返回回去：

ws.on('message', function (message) {
    let data = message.toString()
    ws.send(data);
});

然后把返回回去的数据展示在列表里：

socket.onmessage = function(event) {
  console.log(event);
  let incomingMessage = event.data;
  showMessage(incomingMessage);
};
function showMessage(message) {
  let messageElem = document.createElement('div');
  messageElem.textContent = message;
  document.getElementById('messages').prepend(messageElem);
}

结果如下，每次点击都会请求给后端，后端返回数据，我们看看效果：

然后我们把前端传递的数据也动态修改，加个input框

大家也可以打开多个页面，实现简单的聊天室功能：

屏幕截图 2021-08-04 183456.png

打开多个页面，分别在不同页面输入不同内容，多个页面内容会同步。

这里我把代码放到下面，喜欢的可以看看

代码地址 >>> 简易聊天

Web Sockets简单使用