浏览器使用WebSocket实时通讯

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

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

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

复制代码

3 D# d2 Y- T' S
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 . x6 f! c# ?, C& f$ V

; } a8 R8 Q: E
5 ~ i+ J$ F) @ ^- O/ U5 _$ P该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){( d }1 G" U' ?9 L5 }$ P
7 l+ |$ [: f& R8 ]4 q' G
//打开
. Z, Z7 X2 C/ z0 W, s& U4 V
}
, \5 @4 A6 D; v x9 X5 g
: {/ L4 w. b9 e& J" i# c
9 j. \: d+ J4 H, a. Q$ g$ j% m- b
socket.onmessage = function(){
' U6 t, B# J# t" e6 a+ Q8 T
9 ]+ D' h, m- T" ]2 V- U. \
//在event.data消息数据
$ d2 G) r/ X z9 }
' ^ u+ J5 F' I. q+ U9 m
}
( |6 {7 A5 C/ V+ m0 O- b
! a6 ^1 s# z* w- j9 @2 d
socket.onclose = function(){
' p1 }9 }# x# o) @* `+ w# i
; M* r" t3 S H ]+ P5 ~
//关闭WebSocket
3 }4 j' R0 [" T8 \) a6 |) J. B1 v
% m- y1 G$ O0 S% t. g# k5 ?7 L7 t
}
; C6 U' ?! W8 Q- e9 h( c$ d" M
+ b* X! Q s% k7 E: N" _
socket.onerror = function(){$ ]1 \9 h7 M% X7 V
9 v$ a' R, C( g a% w. b# M) z- e* P
//错误触发
3 h8 L5 h+ C' L; ?
; O, Y" | B# i* _; X2 W! P8 s
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
2 j: Z5 N! }( ^% Z
<html>4 J) R0 j& J( T" B
2 h5 P3 s3 R3 [
<head>8 ~8 n7 I2 D& D; ?
<meta charset="UTF-8">, d: u6 u/ H' @6 u! n& F
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
9 x) o* z+ u( X4 f5 ^
<title>WebSocket</title>
& N. j G) {3 r9 J; }% @+ {
</head>) i) X3 u5 Z3 Y
+ K6 [$ `# U, k7 `, Y0 X2 m
<body>
+ \2 y0 J7 q* L& w
</body>% H# B. Q& J' s& @7 f) T
<script>
2 w. l2 ~; z; u3 D8 {
var socket;
" M. K! H! O$ w1 R1 o7 Y, R; p; n
if (window.WebSocket) {& B! U1 H, G4 k! a% ? Z) d0 x3 L8 r
socket = new WebSocket("ws://localhost:8080/myapp");
% l) \5 p9 ?; z7 g% k o
socket.onmessage = function(event) {. F. B! t' m; U! }# Y
alert("Received data from websocket: " + event.data);, Q/ N( g% V/ F. {& R: z
}$ A: t0 r/ Z- J+ p1 ]6 x
socket.onopen = function(event) {* F( D" e" [" t* a3 S
alert("Web Socket opened!");
" A' `9 j! h' G* D7 G
};7 T M6 Y5 b: r1 ~9 z
socket.onclose = function(event) {
% J7 m* `8 B% [& v# u* {0 K
alert("Web Socket closed.");
/ n1 x h9 n) L+ r
};2 s6 N6 c; L' x" z7 H: d4 L5 s# u% h
} else {
9 z6 I, u; \% _3 o: z& C2 z9 f( E
alert("Your browser does not support Websockets. (Use Chrome)");
( f3 r9 v0 K- q
}
4 |) C; c& b" }4 W# N. z
$ I! Z8 w& a& c0 o
function send(message) {, M/ p+ Q% X& G7 D% W9 o% L/ q) ^
if (!window.WebSocket) {
7 i4 F8 c4 `& K7 c2 v' I
return;6 a' ^" ]* }6 c& q3 c
}& h& Y3 F4 I( R8 C+ C5 M8 F
if (socket.readyState == WebSocket.OPEN) {/ B9 Q2 n: c4 L& O5 ^" x7 ?
socket.send(message);$ Z8 p0 s% s# M$ d8 ?; p
} else {
_: a: H& l- t
alert("The socket is not open.");
/ A9 K8 c1 b' h
}4 Z2 E c; p& w2 _* y$ L
}
+ M; F3 {5 h9 y* }( Y9 I
</script>
& D1 J( Z q. \3 t
7 h0 F; A4 Z& R' C
</html>

复制代码

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

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