一、前端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仅需传输数据,数据传输量小。