浏览器使用WebSocket实时通讯

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

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

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

复制代码

) ~# W+ M3 T: l2 f4 M
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
6 o/ g6 r c0 b9 @. A/ w3 b: C" _; U3 S7 t+ n T4 I: O
, W6 K$ a& w1 _3 F6 u
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
: i# v/ k! y( P5 H! P4 n
. R* w0 H) a, Y1 K3 _$ k" k
//打开6 e) y( g }2 ~) f
! y" n* _2 e; b
}
4 @# h$ u9 p+ Q) ~0 N0 M5 ^: U
- A6 N" [! ^" V& O/ S: @
socket.onmessage = function(){
- U9 N% I! ?: J
$ e. I3 z5 o# g( K; Q# B
//在event.data消息数据* o& n2 _9 P* r4 i6 \* Z9 y6 |
4 h4 ]3 Q- E1 w" h8 M
}
0 z2 D: \+ h: P& v7 I
5 m( ?& V- Y9 H( \' g0 |
socket.onclose = function(){
; u$ r" I u( j0 Q$ O% F
3 \" c- Y' Y2 X! _% B
//关闭WebSocket
8 m0 ]5 f) q+ x' e3 e
, z3 z2 O+ W$ E" g) T5 a9 K
}% K5 ~. h2 E, q: U! F# @3 ?/ g( I
8 M6 |7 h" _2 I3 a
socket.onerror = function(){( Z3 E/ L7 |- B# x/ i, Q
9 g3 c0 a/ A: \7 h6 g8 O
//错误触发
$ n! Z% a- F! P5 F7 ?
% ^: [9 ^' a0 F; \2 R# @: k# \
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>8 j: Q5 i: x; w: U" d q
<html>9 O1 Q' I0 k% M' w( a4 q0 p: ^
3 Q B% P7 K% o( z0 ? N& r
<head>
! M$ p( r! x( x' z: ^% {
<meta charset="UTF-8">/ e# r8 `1 U7 }5 ~1 X: H* F1 M% _
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">& |* J6 @. x& E& \! `
<title>WebSocket</title>
+ c) ]+ \3 `% l4 _
</head>' y4 t5 b! e% M5 }
0 U5 E K; f2 s
<body>
' @+ k* m6 S% Y3 F: V' c# n% F5 S
</body>, X- R0 M+ X$ q2 n
<script>
; O' C! V' `; Z; g
var socket;! H& r( i. G8 m4 m3 \0 S6 M% D. K
if (window.WebSocket) {- v( s; h' V, b# x% y" `' a
socket = new WebSocket("ws://localhost:8080/myapp");
. j7 T0 a- h" Y: q# x
socket.onmessage = function(event) {+ k6 B+ m' S$ o0 @
alert("Received data from websocket: " + event.data);, S( X+ y" |3 ]& h. r, m" [6 ]
}
1 O' c6 Y! e) A) s6 o
socket.onopen = function(event) {
) I5 U% [$ G7 d9 M$ |% l* v
alert("Web Socket opened!");
# Z) k- @+ f ?
};
1 `4 l9 [3 r5 T+ d9 s
socket.onclose = function(event) {
( N5 n5 _" _3 h& F
alert("Web Socket closed.");
8 F7 A7 Y/ P2 p6 @2 Z# t: ?# ]6 D
};/ e; \: ~: d7 C& Z
} else {% B: A @$ ~8 j% J) X$ U! l
alert("Your browser does not support Websockets. (Use Chrome)");5 [6 o# m( y) u* b* n# b
}
( e' [: i/ T: [' @
1 d5 X, D4 \# ~6 ^1 g
function send(message) {7 z' H3 T) |, J% h W/ S1 s
if (!window.WebSocket) {* _9 G4 m5 |# c( q( w& O
return;
% e1 z$ V/ p( c& a& |
}
. Y+ w0 i) x- g* I$ t' q& v
if (socket.readyState == WebSocket.OPEN) {+ ]8 R% z, ?; w7 W
socket.send(message);0 r* | C: M3 B+ m5 [+ z
} else {
7 w* X, H9 ^. I% L+ r7 u6 |+ k
alert("The socket is not open.");& V5 d. a# o6 |/ A0 ?/ A
}0 y, `5 O9 E% _0 x3 }4 {9 R+ \! m
} _1 O" Q6 l8 d% b0 ` ~
</script>
8 @. T4 V+ D, V6 k
# F9 b5 E( I% o8 M2 y9 k% x
</html>

复制代码

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

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

浏览过的版块