socket 无法服务器消息推送,Websocket on(“message”)无法正常工作

本文讨论了WebSocket在服务器消息推送时遇到的问题,详细解释了服务器端和客户端的示例代码,指出了在'connection'事件处理程序中设置的'message'事件监听器不会被触发的原因。同时,提供了在客户端按钮点击时发送消息到服务器,以及服务器广播消息到所有在线客户端的解决方案。
摘要由CSDN通过智能技术生成

我不知道这是你正在使用的包装,但是你使用的包装都是类似的。 在自述文件中,它有两个例子:

服务器示例

在服务器示例中,他们创建一个Web套接字服务器:const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {

ws.on('message', function incoming(message) {

console.log('received: %s', message);

});

ws.send('hello from the server!');

});

这样做是为了创建侦听套接字服务器。 它为message添加了一个事件监听器,因此当客户端连接到服务器时,客户端就可以发送消息,并且事件处理程序将触发。

在该事件监听器之后,它'hello from the server!'发送字符串'hello from the server!' 。 该发送调用不会触发上述事件处理程序,因为此发送调用发生在套接字的服务器端。 它正在该套接字的客户端发送要接收的消息。

客户端示例(通常在浏览器中)const WebSocket = require('ws'); // omit this line if including ws via tag

const ws = new WebSocket('ws://www.host.com/path');

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一种流行的JavaScript框架,用于构建用户界面。它提供了一种简洁、灵活的方式来实现前端开发。WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议,可以实现实时消息推送。 在Vue.js中实现WebSocket消息推送可以通过以下步骤: 1. 首先,安装WebSocket库。可以使用npm或yarn来安装,例如:`npm install vue-native-websocket`。 2. 在Vue.js的入口文件(通常是main.js)中导入WebSocket库,并配置WebSocket连接。示例代码如下: ```javascript import VueNativeSock from 'vue-native-websocket'; Vue.use(VueNativeSock, 'ws://localhost:8080', { format: 'json', reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 3000, }); ``` 上述代码中,我们使用了`vue-native-websocket`库,并配置了WebSocket连接的URL、数据格式以及重连选项。 3. 在Vue组件中使用WebSocket。可以通过在组件中添加`this.$socket`来访问WebSocket实例,并监听相应的事件。例如: ```javascript export default { mounted() { this.$socket.addEventListener('message', this.handleMessage); }, methods: { handleMessage(event) { // 处理接收到的消息 }, sendMessage(message) { this.$socket.send(message); }, }, }; ``` 上述代码中,我们在组件的`mounted`钩子函数中监听了`message`事件,并定义了处理接收到消息的方法`handleMessage`。同时,我们还定义了一个`sendMessage`方法来发送消息。 这样,当WebSocket连接建立后,就可以通过`this.$socket.send()`方法发送消息,并通过`this.$socket.addEventListener()`方法监听接收到的消息

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值