浏览器使用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:// 前缀。
, {: N/ j/ q6 P+ d
2 c. o' w' j, l. g9 C0 ~
5 D# {$ t4 C8 L& Y/ s该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开; o5 l3 |; q t3 d
}' N% ?# v Y, ]9 }& g" Q" j9 a
0 o6 [/ N! C! ]/ I
socket.onmessage = function(){
: c3 U+ J- S/ V/ S
//在event.data消息数据( Y! p0 s; C' a' z) g# d7 H
}! V0 @! l. ?7 |
% |9 O2 m! |% l# H* ?' B
socket.onclose = function(){
( G& m& ?8 ?/ F; F" A9 @
//关闭WebSocket
$ L$ \, q0 F9 ]+ C4 g0 I
}
1 X# g2 x* v0 v- o& ~- |( T
8 C, T$ C# {: z+ k1 T! O4 O5 T, P+ b
socket.onerror = function(){* p( B* P l h% M8 ~8 l6 K1 }5 e* W
//错误触发
6 F! z! T, M1 m- |
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html> G6 F, t7 ?5 W
<head>; R: @' G$ L" \; h1 n2 S# ^6 d. B
<meta charset="UTF-8">: W3 X9 k( L- g7 L) v
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
/ i( M1 {% Y0 p# p, D
<title>WebSocket</title>% C! o5 ]9 a' c( V
</head>& ], [" m( f' q1 {/ V+ p" l5 x
<body>
! |# L3 Q& q) o* O( }
</body>
- y9 {: R; A: y! w% L8 @
<script>
5 A: X7 P: I, E$ V5 K
var socket;! P5 O5 n1 N, K, c( A% O) K/ Q
if (window.WebSocket) {
7 F/ O# u: d/ N
socket = new WebSocket("ws://localhost:8080/myapp");
* R* \# ~3 _0 U8 q! a3 N
socket.onmessage = function(event) {- q+ q- z* [- I# F: g. |7 ^! P
alert("Received data from websocket: " + event.data);7 l: l% S( m" ]3 s8 B. I
}
, x; f7 ^) k; X! [, K( d% Y
socket.onopen = function(event) {5 {. k" `9 u# l) \/ b0 [& W5 s! c8 \, ~
alert("Web Socket opened!");
" X0 F3 L5 ]3 n$ P6 ~
};
/ w. q4 p9 m8 U
socket.onclose = function(event) {
) h" L: @& o h# R
alert("Web Socket closed.");* p$ S7 @6 X% V3 O# X7 U& d
};
' A& H8 i4 J7 y' D: ^; M( e
} else {& ^3 M x9 z3 K5 W# o
alert("Your browser does not support Websockets. (Use Chrome)");
! o3 v6 d' j: P
}
! e; b9 H! B: w& J
" O( t" m) P/ E
function send(message) {
) ^$ A( u2 @. Y5 o; t
if (!window.WebSocket) {
0 N/ N1 x7 j3 w9 q3 h% o4 o9 l1 m
return;
) B7 z# j: W& g
}
' H! u, f0 S8 T% k6 b' U, o& O- o
if (socket.readyState == WebSocket.OPEN) {: ]" ]% }, i7 M
socket.send(message);* a' ?* v6 q' \/ ?
} else {
+ l8 ?+ X. D+ l* _. U
alert("The socket is not open.");. u: F1 j; `, R: L& P
}+ d0 x- \; T$ G* _7 ~$ F+ M
}
* K* f- C0 E. V; v0 L m
</script>
* D( _3 v5 J0 D+ i& z* V5 ^
</html>

复制代码

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

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