前端websocket详解

一、前端websocket怎么用

在前端页面中使用websocket需要创建一个WebSocket对象并指定一个URL，连接到服务器后，可以通过send()方法向服务器发送数据，通过onmessage事件接收服务器发送的数据，通过onclose事件处理关闭连接时的动作。以下是一个用于连接到本地WebSocket服务器的示例代码：

const socket = new WebSocket('ws://127.0.0.1:8080');
socket.onopen = function(event) {
  console.log('WebSocket is connected.');
}
socket.onmessage = function(event) {
  console.log('Received data: ' + event.data);
}
socket.onclose = function(event) {
  console.log('WebSocket is closed.');
}
socket.send('Hello Server!');

二、前端websocket配置要求

在使用websocket时，需要服务器端支持WebSocket协议。如果使用Node.js作为服务器端，可以使用ws模块创建WebSocket服务器。如果使用Java作为服务器端，可以使用Java-WebSocket或Jetty WebSocket API等Java库创建WebSocket服务器。

另外，由于WebSocket使用的协议是ws或wss，而不是http或https，因此需要服务器端支持Cross-Origin Resource Sharing（CORS）策略，否则会遇到同源策略问题。

三、前端websocket项目

前端websocket常用于实时通信的项目，例如在线聊天室、实时在线游戏等。以下是一个用于在前端页面显示实时股票行情的示例代码：

const socket = new WebSocket('ws://127.0.0.1:8080');
const table = document.getElementById('stockTable');
socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  const row = table.insertRow();
  row.insertCell().textContent = data.code;
  row.insertCell().textContent = data.name;
  row.insertCell().textContent = data.price;
}
socket.send(JSON.stringify({ action: 'subscribe', codes: ['000001.SZ', '600000.SH'] }));

四、前端websocket更新列表数据

前端websocket可以用于更新列表数据，并实现实时显示。以下是一个用于实时更新在线用户列表的示例代码：

const socket = new WebSocket('ws://127.0.0.1:8080');
const userList = document.getElementById('userList');
socket.onmessage = function(event) {
  const users = JSON.parse(event.data);
  userList.innerHTML = '';
  for (let user of users) {
    const item = document.createElement('li');
    item.textContent = user.name;
    userList.appendChild(item);
  }
}
socket.send(JSON.stringify({ action: 'get_users' }));
setInterval(function() {
  socket.send(JSON.stringify({ action: 'get_users' }));
}, 3000);

五、前端websocket客户端

前端websocket的客户端可以在浏览器中测试WebSocket服务器的功能。以下是一个用于测试WebSocket服务器的示例代码：

const socket = new WebSocket('ws://127.0.0.1:8080');
const input = document.getElementById('messageInput');
const output = document.getElementById('messageOutput');
socket.onmessage = function(event) {
  output.textContent = output.textContent + '\n' + event.data;
}
input.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    socket.send(input.value);
    input.value = '';
  }
});

六、前端websocket的使用

前端websocket可以用于各种实时通信场景，包括聊天室、在线游戏、实时交易等。以下是一个用于实现实时在线交易的示例代码：

const socket = new WebSocket('ws://127.0.0.1:8080');
socket.onopen = function(event) {
  console.log('WebSocket is connected.');
}
socket.onmessage = function(event) {
  console.log('Received data: ' + event.data);
  // 更新交易状态
}
socket.onclose = function(event) {
  console.log('WebSocket is closed.');
}
const order = { symbol: 'AAPL', price: 142.50, volume: 100 };
socket.send(JSON.stringify({ action: 'place_order', data: order }));

七、前端websocket配置教程

以下是一个使用Node.js和ws模块创建的WebSocket服务器的示例代码：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', function(socket) {
  console.log('WebSocket is connected.');
  socket.on('message', function(message) {
    console.log('Received data: ' + message);
    socket.send('Server Echo: ' + message);
  });
  socket.on('close', function() {
    console.log('WebSocket is closed.');
  });
});

八、前端websocket传递参数

可以将JSON格式的数据作为websocket的消息传递，并在前端页面中解析，进行相应的处理。以下是一个用于传递用户登录信息的示例代码：

const socket = new WebSocket('ws://127.0.0.1:8080');
socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  if (data.action === 'login') {
    // 处理登录结果
  }
}
const user = { username: 'test', password: '123456' };
socket.send(JSON.stringify({ action: 'login', data: user }));

九、前端websocket传图片

前端websocket可以用于传输二进制数据，因此可以使用它来传输图片等二进制数据，将图片显示在前端页面上。以下是一个用于传输图片并在前端页面中显示的示例代码：

const socket = new WebSocket('ws://127.0.0.1:8080');
socket.onmessage = function(event) {
  const data = new Uint8Array(event.data);
  const blob = new Blob([data], { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  const img = document.createElement('img');
  img.setAttribute('src', url);
  document.body.appendChild(img);
}
const fileReader = new FileReader();
fileReader.onload = function(event) {
  const data = event.target.result;
  socket.send(data);
}
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  fileReader.readAsArrayBuffer(file);
});

十、前端websocket面试题选取

1、请简述WebSocket的优势和缺陷。

优势：

1、实时性好，客户端和服务器可以实时双向通信。

2、在HTTP协议基础上创建，使用更方便，资源消耗更小。

3、协议应用较广，支持跨域通信。

缺陷：

1、浏览器兼容性问题，部分浏览器不支持WebSocket。

2、服务器端实现较为复杂。

2、请简述WebSocket和Ajax的区别。

1、Ajax是基于HTTP协议，只支持单向通信，而WebSocket可以实现双向通信。

2、Ajax的请求响应比较频繁，会占用服务器资源，而WebSocket可以重复利用TCP连接，减少了服务器资源的占用。

3、Ajax在请求时需要携带请求头和请求体，数据传输比较大，而WebSocket仅需传输数据，数据传输量小。