JS WebSocket简单示例|极客笔记

JS WebSocket简单示例

WebSocket是HTML5提供的一种在单个TCP连接上进行全双工通信的协议，它使得浏览器和服务器之间可以进行实时数据传输。在Web开发中，我们经常会用到WebSocket来实现一些即时通讯、实时更新等功能。本文将介绍如何使用JavaScript中的WebSocket来创建一个简单的实时聊天应用。

WebSocket的基本概念

在介绍具体的WebSocket示例之前，先来了解一下WebSocket的基本概念。

WebSocket的优点

全双工通信：客户端和服务器之间可以进行双向实时通信，而不需要依赖于HTTP的请求响应模式。
低延迟：WebSocket可以减少通信的延迟，实时性更好。
更少的通信开销：与HTTP相比，WebSocket的通信开销更小。

WebSocket的缺点

兼容性：老版本的浏览器可能不支持WebSocket。
潜在的安全风险：WebSocket开放的连接可能会受到一些安全问题，比如跨站脚本攻击。

WebSocket的使用场景

实时聊天应用：如在线客服、即时通讯等。
实时数据更新：如股票行情、实时地图等。

示例代码

下面我们来看一个简单的WebSocket示例，实现一个简单的实时聊天应用。

客户端代码

// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:3000/chat');

// 监听连接打开事件
socket.onopen = function () {
  console.log('WebSocket连接已打开');
};

// 监听消息接收事件
socket.onmessage = function (event) {
  const message = JSON.parse(event.data);
  console.log('收到消息：', message.text);
};

// 发送消息
function sendMessage(text) {
  const message = { type: 'message', text };
  socket.send(JSON.stringify(message));
}

// 发送消息示例
sendMessage('你好，WebSocket！');

服务器端代码

这里假设我们使用Node.js搭建一个简单的WebSocket服务器。

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

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 3000 });

// 监听连接事件
wss.on('connection', function (ws) {
  console.log('客户端已连接');

  // 监听消息接收事件
  ws.on('message', function (message) {
    console.log('收到消息：', message);
    ws.send(JSON.stringify({ text: '你好，客户端！' }));
  });
});