浏览器使用WebSocket实时通讯

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

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

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

复制代码

* G/ h6 m' d3 W& j
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 * k) ~1 k* @" |. ^" p1 q# i6 @: N
% m& H/ G( m) v( h/ S

# x+ B: v9 s, X8 _5 Z该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
' ~& q; O5 T) p q
6 v9 \9 d* k) v9 g; k4 R9 i5 W
//打开
" S3 @# [7 P8 z# g/ e. h, D
3 ~) o3 n' P/ \! O! R S* ^+ z+ r
}4 w& f* z5 f+ ^& Q ]1 q" ^1 B
4 e( [0 G0 k. Q$ s3 M
( P3 E7 _0 J0 P1 ?8 F2 U G- v
socket.onmessage = function(){$ J( h: |# S: @; |9 c$ W) B* F! D
0 k/ y* M. J3 c# V0 `% I& `
//在event.data消息数据; L5 ^: _' P! w, m c! {* t
5 d; n0 r7 w2 A1 y* |" D
}
6 D) a. ?$ g2 U, v: t
% q9 d7 ?# ?% K2 S
socket.onclose = function(){
8 x- O) R/ X1 y$ O
0 Q. c& d: U7 }
//关闭WebSocket7 H7 w, n8 \% s( q0 X( H; S
, H! n7 p8 d0 t) A" y8 c; y
}; Q, R3 _' g7 T- t1 |6 e
, _! R2 w* ?+ |" X5 L( o- `5 J
socket.onerror = function(){2 K8 D/ h: i1 v6 ~( \3 h7 p5 g
! C4 k0 L7 @- e. F
//错误触发4 w* r3 s$ o/ [% ?- _
# L+ S8 s) e$ S" T9 e/ Y; V$ r
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
- a' ?; V$ W/ g2 s' @
<html>
% S e, T0 m2 {; O* g
8 O+ a6 e8 _! r% v- ~/ y
<head>1 g8 v7 J# \ k; t6 B7 v
<meta charset="UTF-8">. ~* y, C$ ^( N1 g5 L
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">5 s# J4 q1 N! E+ Y% ^
<title>WebSocket</title>
6 \5 [: T3 a3 N
</head>
+ U7 q! k0 x: S; v+ v) A/ @
" A6 e& b: p# q' M; j( m' {, |
<body>% Y; l$ c+ U: q5 d0 w
</body>
# I2 W+ b% }& o0 C" g
<script>
' }4 U1 C. z$ L! ]( T i( h
var socket;9 X) H7 r: G6 ~- W! `. v5 P
if (window.WebSocket) {
3 d8 Z; {6 S% k
socket = new WebSocket("ws://localhost:8080/myapp");4 @0 V7 n8 Q3 [+ K
socket.onmessage = function(event) {
% Z# {" w# V* @! \
alert("Received data from websocket: " + event.data);
$ N( \- n7 ?* x9 i. A1 O1 ~3 ~
}
7 j7 f' I) ]- v; C3 h
socket.onopen = function(event) {& [% n% r$ n+ N% q$ ~) O
alert("Web Socket opened!");
; B( ]2 {5 S: F% L" @
};
' p" C' p L! l3 x8 i: U. j: Z
socket.onclose = function(event) {
+ e1 A' }# X* X6 S' t% r6 B
alert("Web Socket closed.");
# r; |' v8 z# V+ z% Z7 ]& K
};0 H" k+ A: I7 k1 b
} else {& l2 L B4 J' U6 m8 I% n7 v
alert("Your browser does not support Websockets. (Use Chrome)");
7 Y) F; g: W$ L6 D
}) |) a" x6 F0 J3 u9 [
! S7 t2 k4 R8 C) g" p
function send(message) {7 P" ?" G4 O4 w
if (!window.WebSocket) {
) g( v5 c4 Y: v$ q# X0 g* K
return;
& e" Q, U4 @% a( J" Z! k1 o
}6 A5 m9 d, d0 h) Q9 U( x l
if (socket.readyState == WebSocket.OPEN) {
0 n$ D2 M" R- |5 d+ a
socket.send(message);
4 R- c- N$ f% B0 Y
} else {
+ }, W% A3 R* c# p6 _# s
alert("The socket is not open.");
2 R) q2 [4 ~* `
}
; `1 q) J8 D* p
}6 s- c# I1 b4 k* `/ }
</script>1 o! r W- k# h* p, }
1 q# ^% g: {, J1 H: W" l
</html>

复制代码

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

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