Laya Socket·概述

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

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

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

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

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

Event	Summary
close	连接被关闭后调度。
error	出现异常后调度。
message	接收到数据后调度。
open	连接建立成功后调度。

Laya.Socket

Property（属性）
connected : Boolean [read-only] 表示此 Socket 对象目前是否已连接。
disableInput : Boolean = false 不再缓存服务端发来的数据。
endian : String 主机字节序，是 CPU 存放数据的两种不同顺序，包括小端字节序和大端字节序。 LITTLE_ENDIAN ：小端字节序，地址低位存储值的低位，地址高位存储值的高位。 BIG_ENDIAN ：大端字节序，地址低位存储值的高位，地址高位存储值的低位。
input : * [read-only] 缓存的服务端发来的数据。
output : * [read-only] 表示需要发送至服务端的缓冲区中的数据。
protocols : * 子协议名称。子协议名称字符串，或由多个子协议名称字符串构成的数组。必须在调用 connect 或者 connectByUrl 之前进行赋值，否则无效。指定后，只有当服务器选择了其中的某个子协议，连接才能建立成功，否则建立失败，派发 Event.ERROR 事件。

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

Constant（常量）
BIG_ENDIAN : String = bigEndian [static] 主机字节序，是 CPU 存放数据的两种不同顺序，包括小端字节序和大端字节序。 BIG_ENDIAN ：大端字节序，地址低位存储值的高位，地址高位存储值的低位。有时也称之为网络字节序。 LITTLE_ENDIAN ：小端字节序，地址低位存储值的低位，地址高位存储值的高位。
LITTLE_ENDIAN : String = littleEndian [static] 主机字节序，是 CPU 存放数据的两种不同顺序，包括小端字节序和大端字节序。 LITTLE_ENDIAN ：小端字节序，地址低位存储值的低位，地址高位存储值的高位。 BIG_ENDIAN ：大端字节序，地址低位存储值的高位，地址高位存储值的低位。有时也称之为网络字节序。

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("与服务器通信错误.");
    }

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

LayaAir WebSocket 通信

Laya Socket·概述

Laya.Socket

Laya Socket·运用

环境准备

Laya 客户端

猜你喜欢