浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

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

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

复制代码

* B- ]1 q* e* @0 Y与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 5 V( I3 h( c2 m$ j

6 r4 d! M- F" ]: O0 m- N! G* U. c; T; i
; p) n' }4 S1 U8 @' Q. y该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){* ]8 }0 i9 ]4 @5 N+ J. p" u
5 M& D% e! ]. e9 D4 P, {3 i
//打开7 |. N6 b' o- k" n) U
* _$ j+ A, A+ p! L* D: P+ o
}! J9 _7 ]( _0 f, D5 [
* ^5 a9 l% @9 n+ I3 T, N) b* R2 Z
$ w8 X1 ~. Z$ C- M, y3 k8 i
socket.onmessage = function(){
! m' `# ]* J3 _6 x7 `
4 W4 X# t" d" v' d8 M2 i( O
//在event.data消息数据9 l S+ I3 t7 ]& { ~* ]
& B. V4 @, _" U
}
) O2 |; l$ \( o# t3 d. F0 w- q
0 | y- {: U2 n6 K9 A, C3 z5 @
socket.onclose = function(){
+ j- T# a( R/ O* a# p
, \# q" P; S7 M) }. r& K
//关闭WebSocket4 M/ ?% i3 K0 ~
8 L( Z5 [ q+ Q- ~
}5 d% K/ l# ]. W
& M9 S* S8 p( f+ q. u! y
socket.onerror = function(){8 B6 _' ^* x% R6 w
' E- k2 o7 Q% _% P
//错误触发! a4 k) @1 T& T& x
2 P. n: d: x5 Y+ n
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>! s( T' X8 a6 d. V
<html>
) e* J8 |! y" ?" Q& ^
9 I3 y g- B, o2 Q9 d9 A4 j2 v
<head>' M5 U+ r# Z$ B! H4 d) \" C
<meta charset="UTF-8">
6 b$ Z }! s7 q5 H5 g
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">) l& c7 ~! U& L( ^1 p4 H. C
<title>WebSocket</title>
3 b) [1 ]4 T9 x) I) c' \; q3 W
</head>, [ @1 ]! Z& O, r7 A
0 M0 R+ T' M) T- [
<body>
% e5 v* ?) k1 i% f7 Z) y! P
</body>
, m4 D# r$ s5 I% e3 m, Q% \
<script>
6 h3 r+ r6 m M/ p+ |2 l' x7 G
var socket;
. O$ O: K- ?+ J0 f" t
if (window.WebSocket) {; u9 i: K! d9 d4 J
socket = new WebSocket("ws://localhost:8080/myapp");
1 V9 Z- V: ], s6 O& v
socket.onmessage = function(event) {' J' E9 z d1 l4 I. ~
alert("Received data from websocket: " + event.data);
) K# a$ L% X" |/ k8 z' a
}
6 S$ B( U+ e) X; [
socket.onopen = function(event) {
Q0 i0 k* r9 B# w. w
alert("Web Socket opened!");
0 B0 ]$ \4 t0 L% s
};
/ Q* X1 G% b9 `
socket.onclose = function(event) {
, p% K4 R8 X: }+ ]
alert("Web Socket closed.");
5 L0 ^/ N! k: k1 n0 E0 [4 X
};
2 r8 V+ I' `8 [; f: Q' `4 y/ l
} else {5 B% @; v9 t8 Q, Z
alert("Your browser does not support Websockets. (Use Chrome)");
$ i* ]: v* x6 a4 B. n" B
}
5 Z( ^. W& {4 m+ ?( A4 K
) w5 y4 G3 r# m+ F+ l) X3 d
function send(message) {
+ ?) m! L" I% R4 q. [
if (!window.WebSocket) {! s( z! i' @ i) ~9 U
return;1 |- J2 z% g$ b1 T
}0 [4 B2 N7 r( |. W: L I d/ E
if (socket.readyState == WebSocket.OPEN) {
4 I7 U) J; k0 c' ?7 W3 T3 Q
socket.send(message);& q, w' E |5 G
} else {, R. l" W0 d# ?8 i- K0 Q
alert("The socket is not open.");
; j! C' [2 Q0 v
}
, s+ ]( s1 _' a
}( |; t3 P- }$ y" ~5 ]
</script>
* f( D6 _" A0 a
' z* n/ i' X* A5 U
</html>

复制代码

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

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

浏览过的版块