Web Socket技术实现全过程聊天

2023-11-27 17:26:32

技术背景：Web Socket

Web Socket是一种新的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。在HTTP 1.1规范中，加入了Web Socket协议，可以使浏览器与服务器进行全双工通讯，即浏览器和服务器之间可以同时向对方发送数据。

Web Socket实现聊天全过程

1. 握手阶段

在Web Socket中，客户端和服务器的握手非常重要。WebSocket握手采用HTTP协议，客户端使用一个HTTP GET请求向服务器发出连接请求。服务器在收到请求后，返回一个HTTP 101 Switching Protocols响应，表示接受了客户端的连接请求。

2. 建立连接阶段

握手成功后，客户端和服务器之间就建立了Web Socket连接。此时，客户端和服务器就可以相互发送数据了。

3. 数据传输阶段

客户端和服务器可以相互发送数据，实现双向通信。客户端可以使用WebSocket对象发送数据，服务器可以使用WebSocketServer对象发送数据。

4. 关闭连接阶段

当客户端或服务器想要关闭连接时，可以使用WebSocket对象的close()方法或WebSocketServer对象的close()方法来关闭连接。

案例：Web Socket实现聊天功能

以下是使用Web Socket实现聊天功能的示例代码：

// 客户端代码
var socket = new WebSocket("ws://localhost:8080/chat");

socket.onopen = function() {
  console.log("连接成功");
};

socket.onmessage = function(event) {
  console.log("收到消息：" + event.data);
};

socket.onclose = function() {
  console.log("连接关闭");
};

socket.send("你好，世界！");

// 服务器端代码
var WebSocketServer = require("websocket").server;

var server = new WebSocketServer({
  httpServer: require("http").createServer()
});

server.on("request", function(request) {
  var connection = request.accept(null, request.origin);

  connection.on("message", function(message) {
    console.log("收到消息：" + message.utf8Data);

    // 将消息发送给所有连接的客户端
    server.connections.forEach(function(connection) {
      connection.sendUTF(message.utf8Data);
    });
  });

  connection.on("close", function() {
    console.log("连接关闭");
  });
});

server.listen(8080, function() {
  console.log("服务器已启动，正在监听8080端口");
});