精华内容
下载资源
问答
  • <div><p>同时接收两条websocket消息,只回调了一次</p><p>该提问来源于开源项目:0xZhangKe/WebSocketDemo</p></div>
  • // 接收消息回调方法 socket.onmessage = function(res) { // console.log("llws收到消息啦:" +res.data); if(res.data == "保持连接中"){ heartCheck.reset(); }else{ res = ...
  • 业务场景是后台触发某个事件(比如后台执行一条insert语句前台就要刷新界面),每一个用户都对应着一个界面,所以这里用wxId作为一个用户页面的唯一... //接收消息回调方法 websocket.onmessage = function (ev...

    业务场景是后台触发某个事件(比如后台执行一条insert语句前台就要刷新界面),每一个用户都对应着一个界面,所以这里用wxId作为一个用户页面的唯一标识

    js代码

    var websocket=new WebSocket("ws://localhost/voucher/"+wxId);
    
       //接收到消息的回调方法
       websocket.onmessage = function (event) {
          if(event.data == "yes"){
        	  window.location.reload();
          }
       }
    
       //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
       window.onbeforeunload = function () {
    	   websocket.close();
       }

    java websocket ,用来接受和发送消息

    package com.hy.wx.websocket;
    
    import java.io.IOException;
    import java.util.concurrent.ConcurrentHashMap;
    
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    
    import org.apache.log4j.Logger;
    
    
    @ServerEndpoint("/voucher/{wsKey}")
    public class VoucherSocket {
    	private static final Logger log = Logger
    			.getLogger(OrderWebSocket.class);
    	
        //Key作为用户标识
        private static ConcurrentHashMap<String,Session> socketMap = new ConcurrentHashMap<String,Session>();
    
        /**
         * 连接建立成功调用的方法
         * @param session  可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据
         */
        @OnOpen
        public void onOpen(@PathParam("wsKey")String wsKey,Session session){
            socketMap.put(wsKey,session);
            log.info("websocket连接成功.连接key:"+wsKey);
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose(@PathParam("wsKey")String wsKey){
        	socketMap.remove(wsKey);
        	 log.info("websocket退出链接.连接key:"+wsKey);
        }
        /**
         * 发生错误时调用
         * @param session
         * @param error
         */
        @OnError
        public void onError(Session session, Throwable error){
        	 log.error("websocket链接异常");
            error.printStackTrace();
        }
    
        /**
         * 推送消息
         * @param message
         * @throws IOException
         */
        public static void sendMessage(String message,String wsKey) throws IOException{
        	if(socketMap.get(wsKey)!=null) {
        		socketMap.get(wsKey).getBasicRemote().sendText(message);
        	}
        }
    
    }
    

    java  后台service推送消息

    try {
    	//页面推送消息
    	VoucherSocket.sendMessage("yes",wxId);
    } catch (IOException e) {
    	// TODO Auto-generated catch block
    	e.printStackTrace();
    }

     

    展开全文
  • swoole.websocket.Test是自定义的test消息接收事件,该类事件定义的事件类 是用于接收客户端发送过来的消息并自行处理后续逻辑。该类事件可以定义任意个,比如一个项目可以有聊天、客服、直播等多种实时通讯场景,你...

    swoole.websocket.Connect建议定义;每个客户端都会先建立握手,这里是必经之处。比如在这里记录你自己程序用户与客户端的连接ID(fd)等。
    swoole.websocket.Test是自定义的test消息接收事件,该类事件定义的事件类 是用于接收客户端发送过来的消息并自行处理后续逻辑。该类事件可以定义任意个,比如一个项目可以有聊天、客服、直播等多种实时通讯场景,你可以分别定义不同的事件来分开处理不同场景的逻辑业务。
    操作说明:
    Connect事件中的KaTeX parse error: Undefined control sequence: \Request at position 10: event是app\̲R̲e̲q̲u̲e̲s̲t̲请求对象 Test自定义消息接…event是客户端发送过来的消息
    \think\Swoole\Websocket类对象方法:
    broadcast 设置进行广播消息发送
    isBroadcast 判断当前是否是广播模式
    to 设置收件人fd或聊天室名(可以数组设置多个)
    getTo 获取收件人fd或聊天室名
    join 当前客户端加入到指定聊天室(可以多个)
    leave 当前客户端离开指定聊天室(可以多个)
    emit 消息发送
    close 关闭当前连接
    getSender 获取当前客户端id(即fd)
    setSender 设置发件人的fd
    \think\swoole\Manager类对象方法:
    getServer 获取当前Swoole的服务对象,利用该对象直接操作原生Swoole服务方法
    stop 停止服务
    app\listener\WsConnect 中的测试代码

    在这里插入图片描述

    客户端

    <html>
        <head></head>
        <body>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        接收者<input type="text" id="fid">
        发送内容<input type="text" id="content">
        <button onclick="aaa()">发送</button>
        <script>ip
            var ws = new WebSocket("ws://ip:端口/");
            ws.onopen = function () {
                    console.log('lianjiezhong')
            };
            ws.onclose = function () {
                    console.log("lianjieguanbi")
            };
            ws.onmessage = function (evt) {
                console.log(evt)
            };
            function aaa(){
                var fid = $("#fid").val();
                var content = $("#content").val();
                ws.send(JSON.stringify(['test',{
                    to:fid,
                    aa:content
                }]));
            }
    
        </script>
        </body>
    </html>
    

    服务端接收并返回

    <?php
    declare (strict_types = 1);
    
    namespace app\listener;
    
    class WsTest
    {
        /**
         * 事件监听处理
         *
         * @return mixed
         */
        public function handle($event)
        {
           $ws = app('think\swoole\Websocket');
           //发送指定客户端,包括发送者自己
            //to 也可以是一个数据,发送给多个人  
            //testcall 自定义事件名称
           $ws -> to(intval($event['to'])) ->emit('testcall',[
               'form' =>[
                   'id' => 88,
                   'name' => "刘备"
               ],
               'to' => [
                   'id' => 99,
                   'name' => "张飞"
               ],
               'message' => [
                   'id' => 100,
                   'createtime' => "1000-3-5",
                   'message' => $event['aa']
               ]
           ]);
        }    
    }
    
    
       //广播,发送给所有人, 但不发送给自己
       	//										自定义事件名, 接收发送内容
        $ws ->broadcast()->emit('gb',$event['aa']);
    
        //模拟发送  模拟2 给3 发送信息,其实是1发的
        			//setSender   模拟谁
        $ws -> setSender(2) -> to(3) -> emit('mn',$event['aa']);
    
    
        //因为think-swoole 有一些方法并没有包含所有的swoole,那么怎么才能获得
        //swoole本身的方法呢?如下
        //1.   直接获取
        $ser1 = app('swoole.server');
        //2. 通过Manager 管理类获取
        $ser2 = app('think\swoole\Manager')->getServer();
        //验证类是否相同
        var_dump(get_class($ser1));
        var_dump(get_class($ser2));
        //接下来就可以用swoole本身的一些方法了,并不局限于think-swoolele
        //可以用什么方法具体看swoole手册
    
    	验证结果
    

    在这里插入图片描述

    客户端回调

    必须注意的地方是最后发送消息的send方法,由于think-swoole中是按照socketio进行解析发送过来的数据,所以你发送的数据应该是”[‘事件名’, 真正要发送的数据]”的字符串形式:第一个参数的test就是对应服务器端的Test事件,用于区分更多场景的实时通信逻辑业务;第二个参数才是你真正发送的数据可以是字符串、数据、对象,服务器端$event参数获取的就是它。
    需要注意的是返回的字符串并不是直接的JSON字符串。前面多了一个42( socketio 的2个状态码),你需要自行通过JS匹配出第一个“[”字符的位置(str.indexOf(‘[’))然后截取(str.substr(start, end))出来才可以获取到JSON对象。你可以通过返回JSON的第一个值(事件名)判断出对应到什么场景的业务。

    下面代码实例客户端处理数据

    <html>
        <head></head>
        <body>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        接收者<input type="text" id="fid">
        发送内容<input type="text" id="content">
        <button onclick="aaa()">发送</button>
        <script>
            var ws = new WebSocket("ws://ip:端口/");
            ws.onopen = function () {
                    console.log('lianjiezhong')
            };
            ws.onclose = function () {
                    console.log("lianjieguanbi")
            };
    
    
            ws.onmessage = function (evt) {
                // console.log(evt.data)
                call_message(evt.data)
            };
            //处理回调参数
            function call_message(data){
                //处理回调数据
                console.log(data);
                var start;
                var start_arr = data.indexOf('[');
                var start_json = data.indexOf('{');
                if(start_arr < 0){
                    start = start_json;
                }
                if(start_arr >= 0 && start_json >= 0){
                    start = Math.min(start_arr,start_json);
                }
                if(start){
                   var json =  JSON.parse(data.substr(start));
                   if (json instanceof Array){
                        window[json[0]](json[1])
                   }
                }
            }
        function testcall(message){
            console.log(message);
        }
    
            function aaa(){
                var fid = $("#fid").val();
                var content = $("#content").val();
                ws.send(JSON.stringify(['test',{
                    to:fid,
                    aa:content
                }]));
            }
    
        </script>
        </body>
    </html>
    
    展开全文
  • webSocket简单实现

    2020-06-12 12:44:26
    webSocket简单实现 1。前端实现 Document ...//连接发生错误的回调方法 websocket.onerror = function () { setMessageInnerHTML(“WebSocket连接发生错误”);...//接收消息回调方法 websocket.onmessage = fun

    webSocket简单实现

    1。前端实现

    Document

    //连接发生错误的回调方法
    websocket.onerror = function () {
    setMessageInnerHTML(“WebSocket连接发生错误”);
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
    setMessageInnerHTML(“WebSocket连接成功”);
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
    setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
    setMessageInnerHTML(“WebSocket连接关闭”);
    }

    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
    closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
    document.getElementById(‘message’).innerHTML += innerHTML + ‘
    ’;
    }

    //关闭WebSocket连接
    function closeWebSocket() {
    websocket.close();
    }

    //发送消息
    function send() {
    var message = document.getElementById(‘text’).value;
    websocket.send(message);
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    </head>
    <body>
    Welcome<br/><input id="text" type="text"/>
    <button onclick="send()">发送消息</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <!--时钟-->
    <div id="clockdiv">
        <canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>
    </div>
    <script type="text/javascript" src="https://blog-static.cnblogs.com/files/zouwangblog/Clock.js"></script>
    <hr/>
    
    <div id="message"></div>
    </body>
    <script>
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
    websocket = new WebSocket("ws://127.0.0.1:8096/websocket/im/15175581718");
    }
    else {
    alert('当前浏览器 Not support websocket')
    }
    
    //连接发生错误的回调方法
    websocket.onerror = function () {
    setMessageInnerHTML("WebSocket连接发生错误");
    };
    
    //连接成功建立的回调方法
    websocket.onopen = function () {
    setMessageInnerHTML("WebSocket连接成功");
    }
    
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
    setMessageInnerHTML(event.data);
    }
    
    //连接关闭的回调方法
    websocket.onclose = function () {
    setMessageInnerHTML("WebSocket连接关闭");
    }
    
    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
    closeWebSocket();
    }
     
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
    document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
     
    //关闭WebSocket连接
    function closeWebSocket() {
    websocket.close();
    }
     
    //发送消息
    function send() {
    var message = document.getElementById('text').value;
    websocket.send(message);
    }
    </script>
    

    2.java代码实现

    package com.springboot.im.websocket;
    
    import java.io.IOException;
    import java.io.UnsupportedEncodingException;
    import java.util.*;
    import java.util.concurrent.ConcurrentHashMap;
    import java.util.concurrent.TimeoutException;
    import javax.websocket.OnClose;
    import javax.websocket.OnError;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import com.springboot.utils.im.SpringUtil;
    import org.apache.commons.lang.StringUtils;
    import org.apache.commons.logging.Log;
    import org.apache.commons.logging.LogFactory;
    import org.springframework.stereotype.Component;
    
    /**
     * @author zhengkai.blog.csdn.net
     */
    @ServerEndpoint("/imserver/{userId}")
    @Component
    public class WebSocketServer {
    
    
    
        static Log log = LogFactory.getLog(WebSocketServer.class);
    
    
        /**
         * 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
         */
        private static int onlineCount = 0;
        /**
         * concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
         */
        private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
        /**
         * 与某个客户端的连接会话,需要通过它来给客户端发送数据
         */
        private Session session;
        /**
         * 发送者userId
         */
        private String fromUserId = "";
    
    
     
    
    
        /**
         * 连接建立成功调用的方法
         */
        @OnOpen
        public void onOpen(Session session, @PathParam("userId") String fromUserId) throws IOException {
            this.session = session;
            this.fromUserId = fromUserId;
            if (webSocketMap.containsKey(fromUserId)) {
                webSocketMap.get(fromUserId).session.close();
                //加入set中
            } else {
                addOnlineCount();
    
                //在线数加1
            }
            webSocketMap.put(fromUserId, this);
     
            log.info("用户连接:" + fromUserId + ",当前在线人数为:" + getOnlineCount());
            try {
                sendMessage("连接成功");
                //启动MQ-订阅
                getMsg(fromUserId);
    
    
            } catch (IOException e) {
                log.error("用户:" + fromUserId + ",网络异常!!!!!!");
            } catch (InterruptedException e) {
                e.printStackTrace();
            } catch (TimeoutException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
            if (webSocketMap.containsKey(fromUserId)) {
                webSocketMap.remove(fromUserId);
                //从set中删除
                subOnlineCount();
          
            }
            log.info("用户退出:" + fromUserId + ",当前在线人数为:" + getOnlineCount());
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, Session session) {
      
                            sendMessage("发送");
                
        }
    
        /**
         * @param session
         * @param error
         */
        @OnError
        public void onError(Session session, Throwable error) {
            log.error("用户错误:" + this.fromUserId + ",原因:" + error.toString());
            error.printStackTrace();
        }
    
        /**
         * 实现服务器主动推送
         */
        public void sendMessage(String message) throws IOException {
            this.session.getBasicRemote().sendText(message);
        }
    
    
    }
    
    
    展开全文
  • 前端js实现WebSocket和后端通信。建立成功回调,接收消息回调,关闭连接……
  • webSocket基础应用

    2020-11-23 11:29:12
    WebSocket是一种网络通信协议,大多用于即时通信,或者登录心跳功能检测 ...//连通之后的回调事件 连接成功 websocket.onopen = function(){ console.log("已经连通了websocket"); }; //接收后台消息 websocket.onmas

    WebSocket是一种网络通信协议,大多用于即时通信,或者登录心跳功能检测

    websocket基础应用

    1.新建websocket
    2.与后端建立连接
    3.接收后端传递的信息
    4.断开连接

    //新建websocker
     websocket = new WebSocket(url);
    
    //连通之后的回调事件    连接成功
    websocket.onopen = function(){
      console.log("已经连通了websocket");
    };
    
    //接收后台消息
    websocket.onmassage = function(e){
      var massage = e.msg
      console.log(massage)
    }
    
    //连接关闭的回调
    websocket.onclose = function(){
      console.log("websocket断开连接")
    }
    
    websocket常用的操作

    1.直接断开websocket连接

    	function closeWebSocket() {
      //直接关闭websocket的连接
      websocket.close();
    }
    

    2.发送websocket信息

    function sendMassage(){
      //发送websocket信息
      let  msg = {
           "name":"小明",
            type:"人"
      }
      //发送信息
     websocket.send(JSON.stringify(msg ));
    }
    
    展开全文
  • 如果与服务器建立连接成功, 调用 websocket实例的 回调函数 onopen ws.onopen = function () { 如果执行此函数 表示与服务器建立关系成功 } 给服务器发送消息 ws.send(‘消息’) 接收消息 ws.onmessage = function ...
  • Vue 全局 websocket

    2020-11-11 11:11:49
    首先就是网上的写法有很多但是 都是需要创建一个对象进行相关的状态回调,有的是需要创建一个初始化方法进行相关的状态回调,然后看的我就一句话 都挺好的,反正就是需要你去创建对象接收发送消息,然后我就在这写一...
  • vue接入websocket

    2020-11-20 10:15:11
    首先就是网上的写法有很多但是 都是需要创建一个对象进行相关的状态回调,有的是需要创建一个初始化方法进行相关的状态回调,然后看的我就一句话 都挺好的,反正就是需要你去创建对象接收发送消息,然后我就在这写一...
  • 扫码成功后,后端接收微信回调信息; 处理消息后根据ticket使用websocket发送登陆成功消息给前端; 前端websocket获取到登陆成功消息后关闭websocket链接,并调用接口获取用户信息并登陆, ...
  • 在Vue的实例的选项中定义套接字对象,通过mixin在每个生命周期创建时,读取选项中的配置绑定到WS回调对象中 当onmessage接收消息,调用对应的函数,即可获取到当前Vue实例 使用方法 // main.js import { plugin } ...
  • 回调 Future 事件和ChannelHandle 在不考虑分布式netty的情况下,我们知道 netty的处理模型是存在一组IO线程,去处理IO事件,如read,connect,write等等,对于服务端接收到的每个channel,都会将该channel映射到一...
  • Netty 对WebSocket的支持

    2020-12-18 15:52:39
    webSocket 连接之后在服务端生成一个channel 后续前后端进行的双攻通信可以通过channel 进行 通过继承SimpleChannelInboundHandler的处理类在接收消息的时候会触发回调方法 channelRead0 这只是接收数据
  • 1、使用背景:项目前端需要实时渲染后台传回的消息。 2、WebSocket 的定义是:是一...WebSocket.onopen:用于指定连接成功后的回调函数 WebSocket.onmessage:用于指定当从服务器接受到信息时的回调函数 WebSocket.o...
  • Websocket 处理程序 Websocket处理程序提供了一个升级到Websocket的HTTP/1.1连接的接口,并在Websocket连接上发送或接收帧。...当接收到请求时,调用init/2回调函数。要建立Websocket连接,你必须切
  • workerman+websocket

    2019-10-10 15:14:11
    我的需求是: 某设备通过8093端口向服务器推送事件信息; 服务器通过8093端口接收事件提取有用的信息再通过8090...向8090端口推送消息可以主动推送,不需要回调; 解决方案: Workerman是一款纯PHP开发的开源高性能...
  • 在本教程中,我们将使用WebSocket和PHP套接字编程创建一个简单的聊天应用程序。WebSocket用于创建一个桥,以从PHP聊天服务器...创建WebSocket之后,将使用回调来处理聊天过程中客户端和服务器之间发生的事件。 创...
  • //接收消息回调方法 websocket.onmessage = function(){ setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function(){ setMessageInnerHTML("close"); } ...
  • C++简单实现一个websocket服务器

    万次阅读 热门讨论 2018-10-29 09:35:00
    最近想用C++实现一个websocket服务器,到网上找了一下,其实已经有一些实现好的开源库(比如WebSocketPP),尝试了一下,代码实现可以说是十分简单了,基本不到100行代码就搭好了,自己只要实现三个回调函数(OnOpen,...
  • 有时候我们采用MQTT协议接收到的消息想直接在前端页面展示,由于MQTT客户端在订阅后接收到的消息是在回调函数中处理的,所以无法直接将消息发送给前端展示,此时就用到的MQTT对应的WebSocket。 二、本文暂时介绍...
  • 0. 背景最近有个需求:与Web服务器保持长连接,接收服务端发来的消息,并通过某RPC协议invoke客户端某些回调函数。故有了本文的客户端websocket(C#)长连接及简易RPC框架设计内容,此内容分两次介绍,(一)介绍...
  • //接收消息回调方法 websocket.onmessage = function (event) { if (!!arg.message) { arg.message(event); } }; //连接关闭的回调方法 websocket.onclose = function () { if (!!arg.close) {...
  • 通过建立 websocket 连接,来进行收发消息,服务端是在 handler 中处理接收消息,通过 session 发送消息;客户端则通过事件回调函数来进行的。 消息的分类设计 哪怕只是想实现一个简单的聊天室,各种消息也不会少...
  • // 定义连接成功回调函数 var on_connect = function(x) { //data.body是接收到的数据 client.subscribe("/queue/default", function(data) { var msg = data.body; alert("收到数据:" + msg); }); };...
  • //接收消息回调方法 websocket.onmessage = function(){ setMessageInnerHTML(event.data); console.log(websocket.onmessage); } //连接关闭的回调方法 websocket.onclose = function(){ ...
  • emoji-analysis-源码

    2021-03-09 05:16:36
    DCSS远程AI服务集成 该存储库包含一个示例Websocket服务,该服务演示了服务与DCSS平台的AI集成进行交互所必需的功能。 要求 套接字 所有与DCSS的AI集成进行交互而... 回调接收socket对象,该对象的handshake属性包含
  • 作为一个无头的Web Worker,您可以使用它发布和接收消息(您负责所有DOM操作)。 作为一个强大的IFrame中的IDE,Caffeine可以直接操作DOM。 在无头节点服务器上,您还可以与之交换消息(通过WebSocket)。 通过...
  • //接收消息回调方法 websocket.onmessage = function(event) { console.log("回调信息",event.data) setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function() { ...

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

websocket接收消息回调