最近在官方文档里看到网络模块相关内容,于是自己写了一个用websocket实现的聊天室Demo,分享一下。
服务端:基于node.js的websocket模块实现。
WebsocketServer.js
let ws = require("nodejs-websocket");
let server = ws.createServer((connection)=>{
connection.on("text", (data)=>{
console.log('收到客户端消息:', data);
//遍历所有连接的客户端,发送消息
server.connections.forEach((conn)=>{
conn.send(data);
});
});
connection.on("close", (code)=>{
console.log('关闭连接:' + code);
});
connection.on("error", (code, reason)=>{
console.log("异常关闭")
});
});
server.listen(3000);
console.log("服务器启动成功!");
server.on("connection", (connection)=>{
console.log("有客户端连接");
});
客户端:CocosCreator界面实现
UI界面
NetModule.ts网络模块脚本
export default class GameNet{
private static instance: GameNet = null;
private ws: WebSocket = null;
private constructor(){}
public static getInstance(): GameNet{
if(GameNet.instance === null){
GameNet.instance = new GameNet();
}
return GameNet.instance;
}
public init(callback: Function, target: any){
if(this.ws != null)return;
this.ws = new WebSocket("ws://localhost:3000");
this.ws.onopen = (event: Event)=>{
callback.call(target, "登录成功");
}
this.ws.onmessage = (event: MessageEvent)=>{
callback.call(target, event.data);
}
}
public sendMsg(data: string){
if(this.ws != null && this.ws.readyState != WebSocket.OPEN)return;
this.ws.send(data);
}
}
Helloworld.ts场景脚本
const {ccclass, property} = cc._decorator;
import GameNet from "./NetModule"
@ccclass
export default class Helloworld extends cc.Component {
@property(cc.Button)
btnLoad: cc.Button = null;
@property(cc.Button)
btnSend: cc.Button = null;
@property(cc.EditBox)
editBox: cc.EditBox = null;
@property(cc.ScrollView)
scrollViewMsg: cc.ScrollView = null;
posY: number = 0;
start () {
this.btnLoad.node.on(cc.Node.EventType.TOUCH_END, this.dealLoad, this);
this.btnSend.node.on(cc.Node.EventType.TOUCH_END, this.dealSendMsg, this);
}
private dealLoad(){
GameNet.getInstance().init(this.showGetMsg, this);
}
private dealSendMsg(){
let data:string = this.editBox.string;
GameNet.getInstance().sendMsg(data);
}
private showGetMsg(data: string){
let label: cc.Label = (new cc.Node()).addComponent(cc.Label);
label.string = data;
label.fontSize = 30;
label.node.anchorX = 0;
label.node.anchorY = 1;
label.node.x = -this.scrollViewMsg.content.width*0.5 + 10;
label.node.y = this.posY;
this.scrollViewMsg.content.addChild(label.node);
this.posY -= label.node.height;
if(Math.abs(this.posY) > this.scrollViewMsg.content.height){
this.scrollViewMsg.content.height = Math.abs(this.posY);
this.scrollViewMsg.scrollToBottom();
}
//消息显示到聊天框上之后,清空输入框的内容
this.editBox.string = "";
}
}
使用命令行启动服务器:node WebsocketServer.js
运行两个客户端窗口起来。
效果图如下: