前端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僅需傳輸數據，數據傳輸量小。