浏览器使用WebSocket实时通讯

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

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

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

复制代码

/ I* c6 ]+ \* P5 s$ b
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 8 `+ S) s, h: D, i! a3 P5 P2 w
* |! G+ f; M, Q# E0 r V, V, I

, i1 I+ B+ `5 i a1 e. Z该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){; o: J* h' j8 x
$ Y# U' L8 `; Z, O! e
//打开
' v0 h N) X# b
+ P G: i6 J7 v# d# R& P* y
}: z1 b" ^5 B1 S1 B) w
n: o' Y3 \, B5 ]6 S
- K6 m! ~! K3 n. v3 _
socket.onmessage = function(){
, y% v( r5 E; a$ J" W ^
h$ m: d8 J3 w& N, C
//在event.data消息数据8 d5 G9 N0 d+ b" U; f
8 T* T& c. B" r5 F" a" K y2 b
}! F1 D5 j; q! c. R$ g7 [
4 C7 v& b: J+ ?. C! i8 l
socket.onclose = function(){) i8 N3 N3 M: k
7 e9 L1 [0 c+ b' G4 k3 i
//关闭WebSocket8 Y, ~; O( Z" p" q& c% J
2 C+ A% v1 O- a5 j0 x
}" h& q- J$ @9 J1 K/ x
9 j: D% _/ N0 }5 ]" j6 y% K
socket.onerror = function(){1 k9 m' j# ?% R
[. c; ]% x7 t" k& n
//错误触发( q' O2 T& r0 R2 A! M( M" ]
1 Q" q8 R, ?+ L
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
- v- T9 ]6 S9 x* A
<html>
0 R5 A S6 y$ d- r4 L. m
1 I+ k9 u6 D; e
<head>
: U# P, S) J9 o$ V; z) n+ A
<meta charset="UTF-8">8 M- J0 A8 y" c
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
+ q3 |! q5 [" c( g6 Z5 w8 H
<title>WebSocket</title>
/ f. }6 T9 F+ ~3 ^: n8 C" c
</head>+ S, r$ K0 d. G3 ~( D- J
+ {# R# j: M6 K" G, ^7 K$ y; {
<body>% |$ J4 f$ |0 K
</body>
& A: K( f7 Z0 Z: B) W0 ?0 L* i
<script>
6 `6 G/ r! S8 b
var socket;
# V. c6 v/ @/ n$ z1 q+ i
if (window.WebSocket) {% E) s0 O5 r! D9 S B1 U1 O( |+ a
socket = new WebSocket("ws://localhost:8080/myapp");
; R8 t: _4 b! \5 v8 i& F" M
socket.onmessage = function(event) {
. b: W6 h3 ^$ m8 {# U6 y
alert("Received data from websocket: " + event.data);4 m9 M- g, @4 r& ?) Y; m
}
+ n: E8 m$ n) ^, a" k6 Y4 c9 p6 D
socket.onopen = function(event) {
2 y. c( h! H: p# {7 H4 n5 u
alert("Web Socket opened!");
# s. c: h3 t P, V3 N# {
};
, ?1 R1 v. \0 z
socket.onclose = function(event) {
5 S2 h- N9 B; h- ?1 A* T
alert("Web Socket closed.");
8 ]8 L! Y: |0 v/ p2 `- H' S
};
, m# z9 r" {& j3 o
} else {
) T" P: |9 r1 w- f; {! k$ _
alert("Your browser does not support Websockets. (Use Chrome)");
8 w7 m/ A8 F6 W( T& ?0 K. u: m2 l U
}
$ w2 K( Q0 S& T
: d& y' Q# q! h% I* b) @5 N0 r. |
function send(message) {
& ^, J7 m' I+ }, B( g' G+ Q) Q: y
if (!window.WebSocket) {; _0 H# L7 |! j g/ J( `
return;' j0 h8 L$ ~5 l; O, B+ h0 \2 M5 [5 [
}5 q9 w% N5 v, w$ q1 n* }3 T
if (socket.readyState == WebSocket.OPEN) {
" M3 F3 `# J+ m; h( a+ j
socket.send(message);
8 M/ a0 F/ r/ l0 | t
} else {
2 H- g9 B) |+ p
alert("The socket is not open.");7 ~1 J7 q9 b! C
}( o6 w, e! P& f. E, _. g
}: j! n% U9 J- {/ M: y
</script>. c+ U" {' m$ U8 y( I0 t+ V
8 W8 B [8 e. o; |+ ?
</html>

复制代码

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

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

浏览过的版块