浏览器使用WebSocket实时通讯

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

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

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

复制代码

- R+ c: k6 R: F, ~1 ]1 q1 m
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 # W3 B9 V; ?% {; c! C+ O+ c; |7 {

/ {! u8 t7 v, c* k+ v. S- w P; v0 e2 `! |
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
( Q0 G9 O+ a" [4 W3 i r
& y& G- o* U6 Q/ Q5 h8 |! T* @
//打开
4 E7 T4 Y4 T( S' x- p
; U. q. ?& r8 ^: Z9 d" @+ b
}+ B0 M7 \, v0 T1 z3 b
, H; Z( X( ?. R( {( ~7 R% }
1 k" J4 g9 [" O- q& `9 S, Q
socket.onmessage = function(){9 [$ }' w* b* O* {" Z% o
% |# g z8 D* s+ k' ~
//在event.data消息数据: n! Z+ q& L0 t& w, }. c/ E- s
# t% L. f' n5 l6 N
}9 w, e. {6 \; H% X# D3 S @
$ u' [4 z! I5 C% o
socket.onclose = function(){
: v! ?! S! ]- d( n; l r
8 V! O1 n% q9 e" Q! u% W- U% t
//关闭WebSocket
4 n t+ {3 P$ Z/ V8 `: q
* b3 k, Q/ i& Q0 E6 g1 f1 X7 {$ E, a
}: ]& I$ Y* |3 g+ U+ v; z: M
% @; j% c' n$ V y5 R
socket.onerror = function(){
5 B1 y/ {- a) T- y5 p+ z
* x; r2 ] t& v% f. e; s
//错误触发1 U& C9 d/ \6 O6 e5 `7 i
0 m. ?/ C* P! ^$ w6 L, r* Q
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
5 F) T' i4 Z4 W# r1 S \# j
<html>7 ~; m# @" S1 n% e4 C
/ o/ m/ j. B& w: z! J4 H i8 @
<head>8 i) g" e: W! {- O- ~
<meta charset="UTF-8">8 x9 w2 @/ p; c* Y
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ g# h; q8 \# X; O1 m
<title>WebSocket</title>, R' l4 i9 F/ ~ G1 `2 I
</head>
" X" `. u ?: _, L1 h
! X P* E$ B5 ?, a5 F; \
<body>: C4 x/ T" P0 J6 g% K1 K" S' X+ Y C
</body>
: ^" a: P. T( L$ l) M
<script>5 E5 {- u8 Q( _
var socket;
: f) u) [% [; y5 ` B
if (window.WebSocket) {
+ x2 a# u7 n! |! w( G
socket = new WebSocket("ws://localhost:8080/myapp");
7 G! r: s( r) n. g7 c1 t
socket.onmessage = function(event) {; l+ Z- `0 h: X9 p* U! f' t( |1 _
alert("Received data from websocket: " + event.data);( O0 E. P: L" p' r* D, `3 j4 i
}
5 U. m" `4 s5 v/ |% W
socket.onopen = function(event) {# Q1 \* P( G2 e' T* N% P# y" a
alert("Web Socket opened!");* \" f* R7 c# z1 `- N6 z
};/ ^1 ~2 ^7 J D" U
socket.onclose = function(event) {) e& {0 `# [# r9 T- ^
alert("Web Socket closed.");
4 X$ R( v; L" e f; m- S- L. \
};
2 D2 Y2 x" p0 }' @, g( Q" L: y
} else {4 P4 T5 a( D& z( V
alert("Your browser does not support Websockets. (Use Chrome)");
2 F1 |8 `0 k' ?& b- [! a
}
+ @( k5 N2 c& d; ?. c, f
2 p/ E$ [3 Z; a
function send(message) {7 |5 V* T8 u2 l5 a+ Z
if (!window.WebSocket) {4 b$ c4 u% _7 q( _% q# _; Y
return;% n; ~; w8 D- w
}4 z( X W9 N; ` Z7 j/ g
if (socket.readyState == WebSocket.OPEN) {
1 x7 i7 |, w; x* C# D- _) y
socket.send(message);5 e' V$ e1 C# n; {
} else {% w2 @) N/ e- p3 |
alert("The socket is not open.");: v- t& }: g. J! R) m8 P* ]
}8 V/ }* I5 ?9 f6 v: T* s" D; x4 q, q
}
9 ]$ q+ @* u/ l: I z1 j( T' k2 y
</script>: Y `" L; ~6 }: p3 ?0 | }5 Q
9 I: G8 _' M! b+ r
</html>

复制代码

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

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

浏览过的版块