websocket前端向后端传数据时出现Buffer

前后端完成websocket连接以后,用户端输入信息并发送,前端将信息发送给后端

 传的数据如下:

{
   id: new Date().getTime(),
   user: this.username,
   dateTime: new Date().getTime(),
   msg: this.msg,
}

但是后端接收到的数据是这样子的:

 服务端得到的是流数据

(由于一开始不知道原因,然后重新捋了一下逻辑,最后还是没找到)然后本人重新用vue2写了一次,神奇的是,代码是一样的,但是数据就是正确的传到后端了没有出错。

借鉴了别人的意见可能是这个原因

通过post请求,服务端接收到是流数据,必须把流数据通过“+”转化成字符串
1、比如前端提交的参数是
 {
        username:admin,
        password:123456

}

2、服务端(nodejs)得到的是流数据,如
<Buffer 75 73 65 72 6e 61 6d 65 3d 61 64 6d 69 6e 26 70 61 73 73 77 6f 72 64 3d 31 32 33 34 35 36>
3、把流数据通过“+”转化成字符串
 得到才是字符串->   "username=admin&password=123456"

还有一种情况会导致使用流取数据

const fs = require('fs')
fs.readFile(file, function (err, body) {
  console.log(body)
  console.log(body.toString())
})

但如果文件内容较大,譬如在440M时,执行上述代码的输出为:

​
<Buffer 64 74 09 75 61 09 63 6f 75 6e 74 0a 0a 64 74 09 75 61 09 63 6f 75 6e 74 0a 32 30 31 35 31 32 30 38 09 4d 6f 7a 69 6c 6c 61 2f 35 2e 30 20 28 63 6f 6d ... >
buffer.js:382
    throw new Error('toString failed');
    ^

Error: toString failed
    at Buffer.toString (buffer.js:382:11)

​

报错的原因是body这个Buffer对象的长度过大,导致toString方法失败。
可见,这种一次获取全部内容的做法,不适合操作大文件。

可以考虑使用流来读取文件内容。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Java的springboot应用,可以使用WebSocket实现实消息推送功能。要实现后端前端编码,前端显示表情的功能,可以采用以下步骤: 1. 后端发送消息,将消息的表情编码转换为对应的表情图片链接,然后再发送给前端。可以使用Java的正则表达式匹配消息的表情编码,然后替换为对应的表情图片链接。 2. 前端收到消息后,使用HTML的img标签显示表情图片。在显示表情图片,可以将表情图片链接作为img标签的src属性值,这样浏览器就会自动加载并显示表情图片。 下面是一个简单的示例代码: 后端Java代码: ```java // 将消息的表情编码转换为对应的表情图片链接 private String convertEmojis(String message) { // 定义正则表达式匹配表情编码 Pattern pattern = Pattern.compile(":\\w+:"); Matcher matcher = pattern.matcher(message); StringBuffer buffer = new StringBuffer(); while (matcher.find()) { // 获取表情编码 String emojiCode = matcher.group(); // 根据表情编码获取对应的表情图片链接 String emojiUrl = getEmojiUrl(emojiCode); // 替换表情编码为表情图片链接 matcher.appendReplacement(buffer, "<img src=\"" + emojiUrl + "\">"); } matcher.appendTail(buffer); return buffer.toString(); } // 获取表情图片链接 private String getEmojiUrl(String emojiCode) { // 假设表情编码为:smile:,对应的表情图片链接为http://example.com/emoji/smile.png return "http://example.com/emoji/" + emojiCode.substring(1, emojiCode.length() - 1) + ".png"; } // 发送消息 private void sendMessage(String message) { // 将消息的表情编码转换为对应的表情图片链接 String formattedMessage = convertEmojis(message); // 发送消息给所有连接的客户端 for (WebSocketSession session : sessions) { try { session.sendMessage(new TextMessage(formattedMessage)); } catch (IOException e) { e.printStackTrace(); } } } ``` 前端HTML代码: ```html <!-- 显示消息的区域 --> <div id="messageArea"></div> <script> // 创建WebSocket连接 var socket = new WebSocket("ws://example.com/chat"); // 监听WebSocket连接事件 socket.onopen = function(event) { console.log("WebSocket连接已打开"); }; // 监听WebSocket消息事件 socket.onmessage = function(event) { // 将消息添加到显示区域 var messageArea = document.getElementById("messageArea"); var message = event.data; messageArea.innerHTML += message; }; // 发送消息 function sendMessage() { // 获取输入框消息 var inputBox = document.getElementById("inputBox"); var message = inputBox.value; // 发送消息后端 socket.send(message); // 清空输入框 inputBox.value = ""; } </script> ``` 在上面的示例代码后端消息的表情编码转换为对应的表情图片链接,然后发送给前端前端通过WebSocket收到消息后,将消息添加到指定的显示区域,并且浏览器会自动加载并显示表情图片。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值