浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
$ K1 ^* v, d7 P1 B" Y0 q7 Z1 I h' H8 Z. c) I* D

; f5 Q \- z3 L6 a' ?该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
9 r$ u0 p1 O3 W4 a
}
- W4 b! l) J0 Z
- G# S- `3 f& b* q
socket.onmessage = function(){7 {& G1 f1 y6 w' B. ~
//在event.data消息数据
; l% a- m5 n3 j- R1 Z3 K
}( h. e# E6 E2 k0 Y4 z
i7 D u) S, C4 q+ g6 h: D4 Q9 c
socket.onclose = function(){
, q8 b! j5 w. Y5 l; t, g- h3 v
//关闭WebSocket' h2 Q. t" R" Y! q0 N$ m) o
}# C3 x4 R; r+ n! t1 j' I& p6 v+ v
' l, A! g: l; [" a* [
socket.onerror = function(){
2 `: l4 k4 ^& [1 T5 o
//错误触发" w1 R+ A1 @$ C; U0 U6 d
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
) |1 A6 s9 f4 g: b N
<head>* r9 ^2 H! X2 J; z
<meta charset="UTF-8">
4 A p3 _% ^* \1 [) R( K' }
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">; ]: M4 A/ e' b# D9 j$ C
<title>WebSocket</title>) ~1 U/ O1 i2 i: o( w
</head>" A$ p( s0 ~! e& P) H
<body>: a7 V7 d/ q5 v8 d$ B
</body>
. x0 u7 k7 G4 n3 N* Y! |# e Z
<script>
3 F4 m+ S& A9 B: \! C' {
var socket;
: X' y: h* L9 q- x9 ]& K
if (window.WebSocket) {' ]* v: u( i7 D3 r0 w7 o
socket = new WebSocket("ws://localhost:8080/myapp");
6 `' f( V3 ?- }; O( f
socket.onmessage = function(event) {1 x- c# k$ \) h4 T) r
alert("Received data from websocket: " + event.data);, P$ _, r" `8 Q2 z4 {& n6 y
}0 e9 |9 j% Z, p+ H
socket.onopen = function(event) { i( O7 @" K+ z! p! U% Z2 m
alert("Web Socket opened!");, X+ `) U' O0 c0 I; _; M: I
};
" h& Q! g! `" j( W; j$ J% _: o0 @0 i
socket.onclose = function(event) {
, w: q/ j5 d4 X+ ~3 l
alert("Web Socket closed.");
7 @2 w& b. K" {" L, E
};
! L) B9 { p( x/ h9 T
} else {
5 r: C3 I3 S9 a% |4 B
alert("Your browser does not support Websockets. (Use Chrome)");
) K1 x! ~: O( L K- m* r) t/ M
}- Z- h0 d4 r! H, o$ [' L9 m4 C: F
+ p( ? Z8 B9 d) Q# w8 \. }
function send(message) { R6 ]8 u5 i3 z# V4 L
if (!window.WebSocket) {
' f& Q$ l2 m, K- m; o+ e1 E
return;) o- j2 S% ?# J) ^7 P H
}; _/ K7 Z- e9 a5 R) i0 p6 h' ~
if (socket.readyState == WebSocket.OPEN) {
& w. t0 ?2 q% R
socket.send(message);
5 h. I" y4 @6 f: T& x
} else {
v4 Y1 Q# k' y
alert("The socket is not open.");
( [! J( k& Z6 V' J% q% T) _7 K
}
( a& u' F- u9 T
}
5 x1 `: Z) n9 m+ ?7 L7 h6 L! d
</script>) a! T# i+ \7 q! {" b8 [
</html>

复制代码

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

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