本文通过一个JavaScript例子，解析如何使用WebSocket,代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="https://www.baidu.com" />
<title>websocket test</title>
<script>
var socket;
function Connect(){
try{
socket=new WebSocket(‘ws://127.0.0.1:9000‘);
}catch(e){
alert(‘error‘);
return;
}
socket.onopen = sOpen;
socket.onerror = sError;
socket.onmessage= sMessage;
socket.onclose= sClose;
}
function sOpen(){
alert(‘connect success!‘);
}
function sError(e){
alert("error " + e);
}
function sMessage(msg){
alert(‘server says:‘ + msg);
}
function sClose(e){
alert("connect closed:" + e.code);
}
function Send(){
socket.send(document.getElementById("msg").value);
}
function Close(){
socket.close();
}
</script>
</head>
<body>
<input id="msg" type="text">
<button id="connect" onclick="Connect();">Connect</button>
<button id="send" onclick="Send();">Send</button>
<button id="close" onclick="Close();">Close</button>
</body>
</html>
主要代码解读：
申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。。
var wsUri ="ws://127.0.0.1:9000/"; websocket = new WebSocket(wsUri);
WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，
我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。
当Browser和WebSocketServer连接成功后，会触发onopen消息;
websocket.onopen = function(evt) {
};
如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息;
websocket.onerror = function(evt) {
};
当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据;
websocket.onmessage = function(evt) {
};
当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。
websocket.onclose = function(evt) {
};
WebSocket与TCP、HTTP的关系WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。
时间： 2024-10-09 21:49:16