LayaAir WebSocket 通信

末蓝、 2022-04-03 07:46 465阅读 0赞

**目录**

Laya Socket·概述

Laya.Socket

Laya Socket·运用

环境准备

Laya 客户端

--------------------

# Laya Socket·概述 #

1、WebSocket 是一种基于 ws 协议的技术，它使得建立双全工连接成为可能，websocket 常见于浏览器中，但是这个协议不受使用平台的限制。

2、关于 webScoket 本文不做过多阐述，可以参考《[HTML5 WebSocket][]》

3、LayaAir 引擎的 [laya.net.Socket ][laya.net.Socket]是对H5 websocket 的封装，websocket 发送数据的格式一般为二进制和字符串。

4、如果是收发二进制数据，则需要结合 [laya.utils.Byte][]，实际应用中通常使用字符串就足够了。

5、websocket 的连接是异步的，所以一切和后端的交互都要等待 open 事件成功之后，前后端建立了连接通道才可以正常的收发消息。因此实例化 socket 之后必须监听如下四个事件：

<table> 
 <tbody> 
  <tr> 
   <th style="width:102px;">Event</th> 
   <th>Summary</th> 
  </tr> 
  <tr> 
   <td style="width:102px;"> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#event:close" rel="nofollow">close</a></p> </td> 
   <td>连接被关闭后调度。</td> 
  </tr> 
  <tr> 
   <td style="width:102px;"> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#event:error" rel="nofollow">error</a></p> </td> 
   <td>出现异常后调度。</td> 
  </tr> 
  <tr> 
   <td style="width:102px;"> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#event:message" rel="nofollow">message</a></p> </td> 
   <td>接收到数据后调度。</td> 
  </tr> 
  <tr> 
   <td style="width:102px;"> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#event:open" rel="nofollow">open</a></p> </td> 
   <td>连接建立成功后调度。</td> 
  </tr> 
 </tbody> 
</table>

## Laya.Socket ##

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Property（属性）</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#connected" rel="nofollow">connected</a> : Boolean&nbsp; &nbsp;[read-only] 表示此 Socket 对象目前是否已连接。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#disableInput" rel="nofollow">disableInput</a> : Boolean = false&nbsp; &nbsp;不再缓存服务端发来的数据。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#endian" rel="nofollow">endian</a> : String <p><span style="color:#f33b45;">主机字节序</span>，是 CPU 存放数据的两种不同顺序，包括小端字节序和大端字节序。 LITTLE_ENDIAN ：小端字节序，地址低位存储值的低位，地址高位存储值的高位。 BIG_ENDIAN ：大端字节序，地址低位存储值的高位，地址高位存储值的低位。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#input" rel="nofollow">input</a> : *&nbsp; &nbsp;[read-only] 缓存的服务端发来的数据。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#output" rel="nofollow">output</a> : *&nbsp; &nbsp;[read-only] 表示需要发送至服务端的缓冲区中的数据。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#protocols" rel="nofollow">protocols</a> : * <p>子协议名称。子协议名称字符串，或由多个子协议名称字符串构成的数组。必须在调用 connect 或者 connectByUrl 之前进行赋值，否则无效。 指定后，只有当服务器选择了其中的某个子协议，连接才能建立成功，否则建立失败，派发 Event.ERROR 事件。</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Method（方法）</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#Socket%28%29" rel="nofollow">Socket</a>(host:String = null, port:int = 0, byteClass:Class = null)</p> <p>创建新的 Socket 对象。默认字节序为 Socket.BIG_ENDIAN 。若未指定参数，将创建一个最初处于断开状态的套接字。若指定了有效参数，则尝试连接到指定的主机和端口。 注意<span style="color:#f33b45;">：强烈建议使用不带参数的构造函数形式，并添加任意事件侦听器和设置 protocols 等属性，然后使用 host 和 port 参数调用 connect 方法。此顺序将确保所有事件侦听器和其他相关流程工作正常</span>。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#cleanSocket%28%29" rel="nofollow">cleanSocket</a>():void&nbsp; &nbsp; 清理socket。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#close%28%29" rel="nofollow">close</a>():void&nbsp; &nbsp;关闭连接。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#connect%28%29" rel="nofollow">connect</a>(host:String, port:int):void</p> <p>连接到指定的主机和端口。 连接成功派发 Event.OPEN 事件；连接失败派发 Event.ERROR 事件；连接被关闭派发 Event.CLOSE 事件；接收到数据派发 Event.MESSAGE 事件； 除了 Event.MESSAGE 事件参数为数据内容，其他事件参数都是原生的 HTML DOM Event 对象。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#connectByUrl%28%29" rel="nofollow">connectByUrl</a>(url:String):void</p> <p>连接到指定的服务端 WebSocket URL。 URL 类似 ws://yourdomain:port。 连接成功派发 Event.OPEN 事件；连接失败派发 Event.ERROR 事件；连接被关闭派发 Event.CLOSE 事件；接收到数据派发 Event.MESSAGE 事件； 除了 Event.MESSAGE 事件参数为数据内容，其他事件参数都是原生的 HTML DOM Event 对象。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#flush%28%29" rel="nofollow">flush</a>():void&nbsp; &nbsp;发送缓冲区中的数据到服务器。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#send%28%29" rel="nofollow">send</a>(data:*):void&nbsp; &nbsp; 发送数据到服务器。</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Constant（常量）</th> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#BIG_ENDIAN" rel="nofollow">BIG_ENDIAN</a> : String = bigEndian <p>[static] 主机字节序，是 CPU 存放数据的两种不同顺序，包括小端字节序和大端字节序。 BIG_ENDIAN ：大端字节序，地址低位存储值的高位，地址高位存储值的低位。有时也称之为网络字节序。 LITTLE_ENDIAN ：小端字节序，地址低位存储值的低位，地址高位存储值的高位。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.net.Socket#LITTLE_ENDIAN" rel="nofollow">LITTLE_ENDIAN</a> : String = littleEndian <p>[static] 主机字节序，是 CPU 存放数据的两种不同顺序，包括小端字节序和大端字节序。 LITTLE_ENDIAN ：小端字节序，地址低位存储值的低位，地址高位存储值的高位。 BIG_ENDIAN ：大端字节序，地址低位存储值的高位，地址高位存储值的低位。有时也称之为网络字节序。</p> </td> 
  </tr> 
 </tbody> 
</table>

# Laya Socket·运用 #

## 环境准备 ##

下面使用 Java 搭建一个 webSocket 服务器。

package com.wmx.webscoket;
    
    import com.wmx.netty.ServerHandler;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Component;
    
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.HashSet;
    import java.util.Iterator;
    import java.util.Set;
    
    /**
     * Created by Administrator on 2018/11/28 0028.
     *
     * @ServerEndpoint ：标识此类为 Tomcat 的 websocket 服务终端，/websocket/yy.action 是客户端连接请求的路径
     * @Component ：将本类交由 spring IOC 容器管理
     */
    @ServerEndpoint(value = "/websocket/yy.action")
    @Component
    public class ServerEnpoint {
    
        private static Logger logger = LoggerFactory.getLogger(ServerEnpoint.class);
    
        /**
         * sessionSet：存储 客户端 连接
         */
        private static final Set<Session> sessionSet = new HashSet<>();
    
        /**
         * 连接成功后自动触发
         *
         * @param session
         */
        @OnOpen
        public void afterConnectionEstablished(Session session) {
            /**
             * session 表示一个连接会话，整个连接会话过程中它都是固定的，每个不同的连接 session 不同
             * String queryString = session.getQueryString();//获取请求地址中的查询字符串
             * Map<String, List<String>> parameterMap = session.getRequestParameterMap();//获取请求地址中参数
             * Map<String, String> stringMap = session.getPathParameters();
             * URI uri = session.getRequestURI();
             */
            sessionSet.add(session);
            logger.info("新 ws 客户端加入，session id=" + session.getId() + ",当前客户端格个数为：" + sessionSet.size());
    
            /**
             * session.getBasicRemote().sendText(textMessage);同步发送
             * session.getAsyncRemote().sendText(textMessage);异步发送
             */
            session.getAsyncRemote().sendText("我是服务器，你连接成功!");
        }
    
        /**
         * 连接断开后自动触发，连接断开后，应该清除掉 session 集合中的值
         *
         * @param session
         */
        @OnClose
        public void afterConnectionClosed(Session session) {
            sessionSet.remove(session);
            logger.info("ws 客户端断开，session id=" + session.getId() + ",当前客户端格个数为：" + sessionSet.size());
        }
    
        /**
         * 收到客户端消息后自动触发
         *
         * @param session
         * @param textMessage ：客户端传来的文本消息
         */
        @OnMessage
        public void handleMessage(Session session, String textMessage) {
           logger.info("接收到 ws 客户端信息，session id=" + session.getId() + ":" + textMessage);
           session.getAsyncRemote().sendText("收到 \""+textMessage+"\"");
        }
    
        /**
         * 消息传输错误后
         *
         * @param session
         * @param throwable
         */
        @OnError
        public void handleTransportError(Session session, Throwable throwable) {
            logger.error("与 ws 客户端 session id=" + session.getId() + " 通信错误...");
        }
    }

## Laya 客户端 ##

基本通信流程如下：客户端发起连接->连接成功后，服务器发送第一条消息给客户端->接着客户端连发两条消息给服务器->服务器收到客户端消息后进行回发。

//初始化引擎
        Laya.init(600,400,Laya.WebGL);
    	
    	var socket = new Laya.Socket();//创建 socket 对象
    	socket.connectByUrl("ws://localhost/yyServer/websocket/yy.action");//建立连接
    	
        socket.on(Laya.Event.OPEN, this, openHandler);//连接正常打开抛出的事件
        socket.on(Laya.Event.MESSAGE, this, receiveHandler);//接收到消息抛出的事件
        socket.on(Laya.Event.CLOSE, this, closeHandler);//socket关闭抛出的事件
        socket.on(Laya.Event.ERROR, this, errorHandler);//连接出错抛出的事件
    	
    	//与服务器连接成功时触发
    	function openHandler(event){
    		console.log("连接服务器成功.");
    		//往服务器发送数据
    		socket.send("我是客户端 9527.");
    		socket.send("明天请 Joni 一起吃饭 O.");
        }
    
    	//接收到服务器数据时触发
    	function receiveHandler(msg){
    		console.log("收到服务器消息："+msg);
    	}
    	
    	//与服务器连接关闭时触发
        function closeHandler(e){
            console.log("与服务器连接断开.");
    	}
    	
    	//与服务器通信错误时触发
        function errorHandler(e){
            console.log("与服务器通信错误.");
        }

![20181221101005388.gif][]

这是平时最常见的传输字符串数据的方式，如果传输二进制数据，详情可以参考官网：[https://ldc.layabox.com/doc/?nav=zh-js-1-6-1][https_ldc.layabox.com_doc_nav_zh-js-1-6-1]

[HTML5 WebSocket]: https://blog.csdn.net/wangmx1993328/article/details/83178769
[laya.net.Socket]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.net.Socket
[laya.utils.Byte]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Byte
[20181221101005388.gif]: /images/20220403/e0c861f2c23a489c951928fccb9a076f.png
[https_ldc.layabox.com_doc_nav_zh-js-1-6-1]: https://ldc.layabox.com/doc/?nav=zh-js-1-6-1