浏览器使用WebSocket实时通讯

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

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

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

复制代码

x4 y, G0 o9 Q, ?8 m! q1 L
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
! _! `" |6 O1 J2 k; O3 x' h& }( i/ @. j, ]1 _; c9 j% D
" \7 u' E6 h7 V+ L' R, M. E
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){* N' W; f( I; O# Z
P" h9 n2 s' w" _; ]* q
//打开* e6 t. G$ R, n w: X; Y
2 x0 m' F( k/ P% O0 H; r
}
9 S# l7 D2 Y) X; \/ T5 c9 Z7 O: I; F3 u
0 T% e8 o7 e) s; K5 ]# Z% u
' H8 i: X$ ?4 {0 o s
socket.onmessage = function(){/ u' k4 q9 H k% i( B
$ X# g0 k+ d# K/ f3 z3 T" R
//在event.data消息数据3 w" F$ m& N8 v( z1 [ N
9 _' k% r! G1 v% A0 m( `
}1 T: S; ]4 I% k$ C; j; q# }" R
* [3 P; q1 Q: k$ }: Q; k
socket.onclose = function(){
! p' z1 u" n" D4 N7 Q: {$ ?& s
; l& \0 X4 X- m4 @+ l
//关闭WebSocket
' u. z9 e! f8 D/ z+ \/ S+ E7 S' [# m
5 I0 R% F! o+ d m$ f6 T
}5 }; ?( G% {. S' u) Z
$ U2 m3 m w3 Z+ ~ l; E
socket.onerror = function(){% c# X- d1 p, _5 \4 d" Z/ B
X4 q, Z X8 x6 T7 @8 C3 H
//错误触发
- S; x* Y' d6 s+ `" i! B. n4 |
$ j" \) L: l5 `* t
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>* J8 S# D* z+ R! r+ C
<html>4 z' a8 ` D) ?- @3 n* N
) S# |8 X9 ^/ j' d' E
<head>. U! J [$ Y- q; s
<meta charset="UTF-8">1 z0 a' \' _& I3 n x$ C0 S
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
|+ i& m4 E8 y0 o. @4 y; Z3 o
<title>WebSocket</title>
+ C+ D7 k+ X1 B/ m
</head>
/ I3 y+ d1 x' d
+ j3 X5 i' N' _
<body>
; M$ n$ e/ {1 K A1 j- W( D
</body>
! f7 r1 x. @! D# {
<script>
7 X) |; P- e1 Y2 ?; T+ c
var socket;1 _* c! ]7 V( H6 r* ~: D! i$ h
if (window.WebSocket) {
& z y5 K ~) D( m% H
socket = new WebSocket("ws://localhost:8080/myapp");0 u9 q* D* D- b" c
socket.onmessage = function(event) {
alert("Received data from websocket: " + event.data);
- A% U$ p; v) ?/ y( d& v8 D
}
. g* L# J" [& H2 t1 n0 B. v0 w! R
socket.onopen = function(event) {
* D- A0 `, f$ r) _5 B3 f. k' }
alert("Web Socket opened!");9 w: ^( U+ b$ S d1 q
};
& z N% Y) ~$ l
socket.onclose = function(event) {" z& q0 P3 ^- O" _" G( m
alert("Web Socket closed.");! f X% F, X1 Z z3 [
};: X/ H- ?6 {- [6 T7 M
} else {! |* v# C/ S6 J) _
alert("Your browser does not support Websockets. (Use Chrome)");
+ H; J& _* e4 I# e
}
1 \( a" ^$ E. E1 E0 S2 ~8 b
- J6 ^3 A% c3 E& S2 w
function send(message) {7 R+ u$ o" U5 x, a, N
if (!window.WebSocket) {' t9 I; G6 U; S& ^8 z
return;
u' ]1 c2 R. \ a# ~9 R' D
}. D5 b& u6 f4 W' u
if (socket.readyState == WebSocket.OPEN) {
! Y% L6 R+ V/ y# X
socket.send(message);
: H- f0 @1 f+ Z1 D4 K
} else {
7 _& P4 o6 T z# j9 O& o# Z
alert("The socket is not open.");
) G& d5 f- ]5 Q9 H5 k
}
; B- u( j7 m1 }1 ]4 v
}
& f7 q. H5 B& S& N: ~5 G L
</script>. R' \3 T! M( O ~# E2 z
) N5 M/ _2 ]- N: P3 |
</html>

复制代码

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

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

浏览过的版块