博客

前言

nodejs游戏服务器开发系列文章以nodejs+Typescript+CocosCreator+WebSocket为例，搭建服务器和客户端。

WebSocket介绍

官网:

http://websocket.org/index.html


详细介绍参考阮一峰的教程：

http://www.ruanyifeng.com/blog/2017/05/websocket.html


还有这两篇文章，写的非常好：

WebSocket介绍一

，

WebSocket介绍二


官方API地址：

https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

需要注意：

RFC规范指出，WebSocket是一个message-based的协议，它可以自动将数据分片，并且自动将分片的数据组装。

也就是说，WebSocket的RFC标准是不会产生粘包(sticky)、半包(half a pack)问题的。无需应用层开发人员关心缓存以及手工组装message。WebSocket API中提供的message响应就是一个完整的消息。

但是需要注意的是，由于各个WebSocket库对RFC规范实现的良莠不齐，有些库还是会有一些莫名问题，需要自己甄别。特别是当你的数据message特别大的时候（到底是多大是特别大，由具体实现决定）。

nodejs集成WebSocket

nodejs中最常用的WebSocket库ws托管在git上

https://github.com/websockets/ws


api文档为：

https://github.com/websockets/ws/blob/master/doc/ws.md

安装方法：

服务器项目目录Server下执行

npm install ws


会在node_modules目录下添加ws和async-limiter文件夹。

继续执行

npm install @types/ws

,会在node_modules/@types目录下添加ws文件夹，其内为ws模块的声明文件。

WebSocket数据类型

WebSocket数据传输类型只支持文本类型和二进制类型。二进制支持Blob和ArrayBuffer两种类型。二进制默认是Blob类型。

// 设置二进制数据类型为blob（默认类型）
ws.binaryType = "blob";
// Event handler for receiving Blob messages
ws.onmessage = function(e) {
if(e.data instanceof Blob){
console.log("Blob message received", e.data);
var blob = new Blob(e.data);
}
};

//ArrayBuffer
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
if(e.data instanceof ArrayBuffer){
console.log("ArrayBuffer Message Received", + e.data);
// e.data即ArrayBuffer类型
var a = new Uint8Array(e.data);
}
};

写一个简单的WebSocket服务器

打开index.ts，复制以下内容：

import * as WebSocket from "ws"
const server = new WebSocket.Server({ port: 8083 });
server.on("listening", () => {
    console.log("服务器启动完毕！开始侦听");
});

server.on("connection", function connection(ws) {
    ws.on("message", function incoming(message) {
        console.log("received:%s", message);         
    });
    ws.send("hhhello");
});

客户端代码

typescript已经封装有WebSocket模块，使用自带的即可。

    private ws: WebSocket;
    start() {
        console.log("go!");
        this.ws = new WebSocket("ws://192.168.2.31:8083");

        this.ws.onopen = this.onOpen.bind(this);
        this.ws.onmessage = function (event) {
            console.log("client rcv:" + event.data);
        }.bind(this);
        this.ws.onclose = function (event) {
            console.log("服务器已关");
        }.bind(this);
        this.ws.onerror = function (event) {
        }.bind(this);
    }

    private onOpen(event: MessageEvent) {
        console.log("连接建立啦");
        this.sendData(JSON.stringify({
            ctype: "login",
            data: {
                name: "jack",
                age: 22
            }
        }));
    }
    private sendData(data) {
        this.ws.send(data);
    }

总结

上述代码演示了，客户端把JSON格式的数据字符串化，传给服务器。