webSocket 建立连接及通信方法

431 阅读3分钟

什么是webSocket?

webSocket是一种用于在单个TCP连接上进行全双工通信的网络协议。它使用类似于HTTP的握手来建立连接,然后使用单独的持久连接来进行通信。这意味着连接是持久的,它一直保持打开,直到有一方主动关闭连接。

webSocket与http的区别?

  1. 建立连接的方式:
  • HTTP:每次请求都需要重新建立连接,即每次请求都会涉及到建立一个新的TCP连接
  • WebSocket:客户端和服务器之间只需建立一次连接,之后可以进行双向通信,无需每次都重新建立连接。这种连接称为持久连接。
  1. 通信模式:
  • HTTP:是非持久化、单向的通信协议。在这种模式下,客户端通常负责主动发起请求,然后服务器回应。
  • WebSocket:提供全双工通信,意味着客户端和服务器端可以在连接建立后互相主动发送和接收数据。
  1. 连接状态:
  • HTTP:每次请求都需要重新验证身份,因为每个请求都是独立的
  • WebSocket:保持连接状态,即使不进行数据传输,也可以维持连接。

4.数据传输:

  • HTTP:每次数据交换除了真正的数据部分外,还包含大量的HTTP头部信息
  • WebSocket:通过建立TCP连接后,后续的数据交换不需要发送额外的HTTP头部信息,提高了数据传输的效率

5.实时性和性能:

  • HTTP:由于每次请求都需要等待服务器响应,因此延迟较大,不适合实时通信。
  • WebSocket:由于是全双工的,可以实现实时的双向通信,具有更好的实时性和性能。

如何使用webSocket?如何建立连接?

基本语法

// 创建WebSocket对象
var socket = new WebSocket('ws://example.com/socket');//服务器地址

// 定义消息处理函数
socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};

// 发送消息
socket.send('Hello, Server!');

WebSocket 实践案例
1.创建webSocket对象并建立连接

首先,在你的 JavaScript 代码中创建一个 WebSocket 对象。你需要提供 WebSocket 服务器的 URL(ws://example.com/socket),一旦连接建立,WebSocket 对象会触发onopen事件。:

// 创建WebSocket对象
var socket = new WebSocket('ws://example.com/socket')

// 处理连接建立事件
socket.onopen = function(){
    console.log('WebSocket connection opened:', event);
}
2.消息发送

发送消息使用send方法:

// 发送消息
socket.send('Hello, Server!');
3.消息接收

接收消息则通过onmessage事件处理:

// 处理接收消息事件
socket.onmessage = function(event) {
  console.log('Received message:', event.data);
};
4.连接关闭

最后,我们需要处理连接关闭的情况。WebSocket 对象会在连接关闭时触发onclose事件,你可以在这个事件处理程序中执行必要的清理操作:

// 处理连接关闭事件
socket.onclose = function(event) {
  console.log('WebSocket connection closed:', event);
};
服务器代码示例

首先,我们创建一个 WebSocket 服务器,文件名可命名为server.js,负责处理客户端连接和消息传递。

// 引入WebSocket模块
const WebSocket = require('ws');

// 创建WebSocket服务器,监听端口3000
const server = new WebSocket.Server({ port: 3000 });

// 当有客户端连接时触发
server.on('connection', (socket) => {
  console.log('Client connected');

  // 处理收到的消息
  socket.on('message', (data) => {
    console.log(`Received: ${data}`);

    // 广播消息给所有连接的客户端
    server.clients.forEach((client) => {
      if (client !== socket && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });

  // 处理连接关闭
  socket.on('close', () => {
    console.log('Client disconnected');
  });
});