html5 客户端程序,websocket html5 客户端测试代码

测试 websocket 客户端的连接、发送消息和断开，生成一个面板用于显示 log，代码功能单一，便于测试。

index.html

WebSoket Demo

// tips: WebSocket 调试脚本

var WebSocket = WebSocket || window.WebSocket || window.MozWebSocket;

// 验证浏览器是否支持WebSocket协议

if (!WebSocket) {

alert("WebSocket not supported by this browser!");

}

else {

var g_ws = null;

function Display() {

// 载入上次记录的数据 //...

console.log("websocket 测试");

}

var log = function (s) {

if (document.readyState !== "complete") {

log.buffer.push(s);

} else {

document.getElementById("contentId").value += (s + "\n");

}

}

function CreateConnect () {

var msg = document.getElementById("wsUrlId");

console.log("CreateConnect(), url: " + msg.value);

if (g_ws == null) {

var wsUrlValue = msg.value;

try {

g_ws = new WebSocket(wsUrlValue);

// 监听消息

g_ws.onmessage = function (event) {

//valueLabel.innerHTML+ = event.data;

log("onmessage(), 接收到服务器消息: " + event.data);

};

// 打开 WebSocket

g_ws.onclose = function (event) {

//WebSocket Status:: Socket Closed

log("onclose(), Socket 已关闭!");

g_ws = null;

};

// 打开WebSocket

g_ws.onopen = function (event) {

//WebSocket Status:: Socket Open

// 发送一个初始化消息

// g_ws.send("Hello, Server!");

log("onopen(), Socket 连接成功!");

};

g_ws.onerror = function (event) {

//WebSocket Status:: Error was reported

log("onerror(), Socket 发生错误!");

};

}

catch (e) {

g_ws = null;

log("连接异常, 重置 websocket");

}

}

}

function SendMsg() {

var msg = document.getElementById("messageId");

console.log("SendMsg(), msg: " + msg.value);

if (g_ws != null) {

//alert(msg.value);

log("发送 Socket 消息: " + msg.value);

g_ws.send(msg.value);

}

else {

log("Socket 还未创建!, msg: " + msg.value);

}

}

function CloseConnect () {

console.log("CloseConnect()");

if (g_ws != null) {

g_ws.close();

}

}

}

Create

Close

Send