浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
4 W F: r8 }. L; x9 t0 R, ?6 G) r2 U( ?' u
( P2 r$ Q3 }1 A1 F+ K5 z/ p. O/ [1 Z
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开! e9 Q( T9 V9 }& ^6 M. n2 V& u4 P
}
" e, C5 Y; b4 A9 C- _$ t
) m( Z1 }8 z" l* v
socket.onmessage = function(){& l2 W4 m5 a- t3 c. ^( ^
//在event.data消息数据
2 f$ m. i0 {6 j9 B2 G
}
' _; V- ]) _4 v/ r; `2 ~; v( p
: ], v6 r5 t1 ?& H) E
socket.onclose = function(){
! c* u% f* H" [& g
//关闭WebSocket8 P) h# \7 q, _3 L; k p
}
" a' p2 L8 W+ ?3 x, K$ x
/ F* z* E( [2 X( h: Q( K
socket.onerror = function(){+ s' [; H# I1 B3 \8 N0 g
//错误触发! Q8 |. `# u ]( z0 g# x" @8 s
}

复制代码

通过套接口发送数据，调用socket.send:

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
! b7 A, v0 B$ w9 r7 T) \
<head>5 G2 P Z+ f/ ?3 V
<meta charset="UTF-8">
% F: ?4 W }5 _$ m
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
8 ~6 D. u% W) M9 H! O
<title>WebSocket</title>! J/ E {. P' C* y9 i
</head>- f& q6 k0 M: I: o+ ]+ I
<body>
' r. y8 ^9 E6 k1 t
</body>
% n% ]9 i! t! }; c) t
<script>( x0 c0 S+ n! [, D
var socket;( i( _3 o( z' e
if (window.WebSocket) {3 B+ u+ P1 B! d8 g
socket = new WebSocket("ws://localhost:8080/myapp");, A. y7 Z2 t4 g& f
socket.onmessage = function(event) {
2 {" h6 i( C% r" M
alert("Received data from websocket: " + event.data); }8 n9 q, @ P1 b1 `% @; o
}
! B2 _2 u2 {7 c1 w6 \ b' S
socket.onopen = function(event) {! T' X( C y% t2 X
alert("Web Socket opened!");
# U- {8 k! |4 T6 @" H
};
& c4 l+ [+ I& Q7 T% s
socket.onclose = function(event) { a% e& K" F. v [" s3 l
alert("Web Socket closed.");
9 P/ {, ~+ D$ j: a/ x
};: v4 A+ Q( ]* j3 Q
} else {, J3 @. C9 V2 G( D4 m* s
alert("Your browser does not support Websockets. (Use Chrome)");$ I& p2 U- x4 |3 N, k
}/ K. T) ?4 D' K# g
6 {0 z: h+ N+ D. {/ `' o; ]
function send(message) {
1 | d7 H+ r- T* W0 I$ j; s
if (!window.WebSocket) {- r- U% ~. U7 ?5 t+ E4 Y! O
return;
) J+ O% X. B/ i
}
1 `2 x! H5 f6 j/ _) e7 f z
if (socket.readyState == WebSocket.OPEN) {
- L/ o% ?0 H$ W! e5 j3 q) X
socket.send(message);3 @* R+ a" Z6 E7 r% ^4 [5 O. J
} else {
2 l$ N6 B4 C4 H: T& I0 d0 s
alert("The socket is not open.");
) U u( f! E1 @+ c. e# }' E; B
}
2 h" [" d& }% c V4 e( j
}
4 }: Q" W' [+ Y" w
</script>1 U% X. {* ?0 B& ^
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[php学习资料] 浏览器使用WebSocket实时通讯

浏览过的版块