html5 websocket技术实现及应用案例

一、websocket基础知识

WebSocket是一种网络通信协议，在客户端和服务器之间建立全双工通信通道，可以实现实时通信的目的，是HTML5中新增的标准，可以在浏览器和服务器之间建立持久性的连接。

WebSocket协议建立在TCP协议之上，客户端的浏览器首先向服务器发出一个HTTP请求，然后在服务器端生成一个WebSocket对象，再根据请求头中的“Upgrade”字段判断客户端是否要升级协议，如果是的话就发送一个“101 Switching Protocols”的响应头，表明已经同意进行协议升级，从而建立WebSocket连接。这意味着WebSocket协议可以同时在HTTP和TCP协议之上运行。

二、websocket实现和应用案例

1、websocket实现

const socket = new WebSocket('ws://localhost:8080/ws');

socket.onopen = () => {
  console.log('WebSocket连接已打开');
};

socket.onmessage = event => {
  console.log(`收到消息：${event.data}`);
};

socket.onclose = event => {
  console.log(`WebSocket连接已关闭，关闭码为：${event.code}`);
};

socket.onerror = error => {
  console.error(`WebSocket连接发生错误：${error}`);
};

2、应用案例1 – 实现实时聊天室

通过WebSocket实现实时聊天室，代码如下：

const socket = new WebSocket('ws://localhost:8080/ws');
const form = document.getElementById('form');
const message = document.getElementById('message');

socket.addEventListener('message', event => {
  const li = document.createElement('li');
  li.innerText = event.data;
  document.getElementById('messages').appendChild(li);
});

form.addEventListener('submit', event => {
  event.preventDefault();
  const text = message.value;
  socket.send(text);
  message.value = '';
});

3、应用案例2 – 实现基于WebSocket的协作白板

通过WebSocket实现基于协作的白板，可以多人实时协作涂鸦和绘图，代码如下：

const socket = new WebSocket('ws://localhost:8080/ws');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', event => {
  isDrawing = true;
});

canvas.addEventListener('mousemove', event => {
  if (isDrawing) {
    const x = event.clientX - canvas.offsetLeft;
    const y = event.clientY - canvas.offsetTop;
    context.lineTo(x, y);
    context.stroke();
    socket.send(JSON.stringify({ x, y }));
  }
});

canvas.addEventListener('mouseup', event => {
  isDrawing = false;
});

socket.addEventListener('message', event => {
  const data = JSON.parse(event.data);
  context.lineTo(data.x, data.y);
  context.stroke();
});

三、WebSocket与其他技术的结合

WebSocket可以与其他技术结合起来使用，例如：

1、与Node.js结合，使用ws库实现WebSocket服务器端：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', socket => {
  console.log('WebSocket连接已打开');

  socket.on('message', message => {
    console.log(`收到消息：${message}`);
    server.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('WebSocket连接已关闭');
  });

  socket.on('error', error => {
    console.error(`WebSocket连接发生错误：${error}`);
  });
});

2、与GraphQL结合，使用subscriptions-transport-ws库实现GraphQL实时订阅。GraphQL是一种客户端和服务器之间数据通信的协议，可以使用subscriptions-transport-ws库在WebSocket上实现实时订阅：

const { SubscriptionServer } = require('subscriptions-transport-ws');
const { execute, subscribe } = require('graphql');
const { createServer } = require('http');
const { SubscriptionType } = require('./schema');

const schema = new GraphQLSchema({
  subscription: SubscriptionType,
});

const server = createServer((request, response) => {
  response.writeHead(404);
  response.end();
});

server.listen(8080, () => {
  console.log('GraphQL WebSocket服务已启动');
});

const subscriptionServer = SubscriptionServer.create({
  schema,
  execute,
  subscribe,
}, {
  server,
  path: '/graphql',
});

四、WebSocket的优缺点

1、优点：

① 实现了实时通信，可以在客户端和服务端之间建立持久性的连接；

② 支持用于多种用例，例如实时聊天、协作涂鸦、实时游戏等；

③ 并发性高，可以在同一时间处理多个连接；

④ 跨平台兼容性好，可以在不同的操作系统和浏览器中使用。

2、缺点：

① WebSocket协议较为新颖，需要一定的学习和使用成本；

② 由于WebSocket是在HTTP协议之上实现的，因此无法直接与已有的TCP/IP协议的应用程序集成；

③ 由于WebSocket协议需要服务器端主动向客户端推送信息，因此需要较高的服务器性能。