浏览器使用WebSocket实时通讯

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

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

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

复制代码

" `, j# s# i' F4 p$ o& V; U, W与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
5 I- L) Q D( L" N, Z
9 N+ w, f C. Y0 x- S7 M
& s9 v( s/ z. g) v2 R+ P$ k该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){# x$ p' u2 {$ j/ d$ R% P8 ?
8 F5 ]" k Y/ a: y3 M" V
//打开- t( _% U1 z& j; @, {, Z l
3 d/ p9 v$ O2 ]/ F
}5 L& K5 v c: @. x2 B
& Q- N& o" R7 O1 E4 B; |
: M, x' z$ n2 A: r H
socket.onmessage = function(){% L6 U4 \( U. X" G
" }6 b7 `6 k- i; I3 ~! r
//在event.data消息数据
2 h3 n- G4 w _: v( G: M% \! }: C
7 x! x+ `# A( a- {; Q, C
}
4 v) B$ X( {8 b7 T+ J6 o
- U2 q0 k* [* u4 S O( F: ]
socket.onclose = function(){% R, R: q4 p# l/ T) F; u- [
9 N, G! T- u' n1 X h- n
//关闭WebSocket5 `7 r% h, D3 U v L
9 c$ [" [8 m g9 L- o; g2 A
}
% M) |+ H% G2 e; f
. o, t) q' g/ n( _7 [- g
socket.onerror = function(){
& v. z A4 e* y+ b
, y5 Y9 c" u% ~+ d$ d3 h$ B# H E
//错误触发5 d6 }$ b+ K! `( Q; Z
6 P& P1 V; [' D) o+ i8 w+ ~
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>6 p' U; }' h' w$ q3 @/ r5 y
<html>: M; K- `3 @4 H9 S3 y4 y# i
0 Q. O7 c1 n0 b* L) N5 `7 v! j
<head>
, {+ L; B. C; {2 [
<meta charset="UTF-8">
1 N- `% ]" n; G3 `. ^" a( I; n
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
3 p K) T( e d6 v7 U! B+ a+ e6 H
<title>WebSocket</title>
6 x7 E; W8 e1 Z9 X5 a
</head>
% } j, u* X9 k
, H2 [6 R' ^% E& c; q. }2 e9 n
<body>0 l" f' ?0 y% M, d
</body>
* A8 s% W( X3 S1 C7 B C5 n
<script>4 a2 n- Y6 F8 P \: Z
var socket;
8 t; k8 X/ @) ]1 q, r3 C7 ~
if (window.WebSocket) {$ x' y) ?* h; Y
socket = new WebSocket("ws://localhost:8080/myapp");
5 j; w# I. ]/ M$ n0 U
socket.onmessage = function(event) {" c q8 I' }8 {3 @# e
alert("Received data from websocket: " + event.data);
, v' t. I* c8 q' L8 {& v
} W" N9 o7 Z( O) h$ `$ [* F& R
socket.onopen = function(event) {9 F1 N: S5 b# D: o" u5 n9 c0 [
alert("Web Socket opened!");" J9 Q4 b# O1 b. a
};. a8 P# Z$ R" R* z2 L0 b3 l! k- n
socket.onclose = function(event) {5 I: n/ z6 U, p5 Y) p4 z% H
alert("Web Socket closed.");
* c& ?$ b# K$ k/ F/ K5 h5 C
};# L) \; c7 P. ^4 s
} else {2 n% _$ W, H. P6 Q2 V8 U+ |
alert("Your browser does not support Websockets. (Use Chrome)");
. s# l6 i! X: }
}2 X2 F* z7 t6 q* k: X
: a* m2 ?4 F% u& H5 e
function send(message) {+ O( ^+ P# h) H2 L
if (!window.WebSocket) {
( ?" \: M, a: Q; I
return;
* Z, J$ i+ j" E. A9 K; n3 I: i* r
}
; h# h) f# R% N0 l, i
if (socket.readyState == WebSocket.OPEN) {4 ]4 [4 |9 C+ G8 K- a4 g$ V
socket.send(message);
( S8 f8 j2 E$ e% v* \; N9 c
} else {
2 h1 J0 v7 t" Q* T7 j
alert("The socket is not open.");% |" V/ D- J7 ]4 \5 I7 T* m
}" p1 f6 N3 @ [1 {. U- N/ ^
}
; d, N0 z1 v; \: \! r+ F
</script>, K; h* G8 p( Z
3 H" `- J) ~! @) F
</html>

复制代码

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

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