浏览器使用WebSocket实时通讯

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

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

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

复制代码

/ S4 D4 S- o2 L. l; \, q$ E与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
% Q& X' X% Q( O9 {( m* Q! @7 a; C2 `" ?8 L: M

" D" }. d7 |2 D3 T' E该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
2 o8 \$ t% H \
1 C3 K c" M: \6 g3 \
//打开
& n2 h; h+ a; d5 @9 y
9 ]. ]8 U N/ v2 }) B: j/ n; d
}
6 U% n5 v; h* ?& H8 V! U8 m) a7 t
3 J* K; h4 g8 T x- i8 h8 n+ M1 w
3 Y8 @+ V# h) d2 E
socket.onmessage = function(){# r- U! B* n3 P; D: C$ A: F, u
; M/ w, R+ r( O& m+ o5 N- }9 h
//在event.data消息数据
1 v, W/ K O6 q1 |
" V1 ?7 r1 o$ B) r
}
, [, j4 ~9 M/ f" ?; d: @% E; h
- O4 P+ h- K- W; M# |
socket.onclose = function(){
{2 K/ _' G3 n- M! Y
" l6 V3 S0 X5 P4 P- Y9 a
//关闭WebSocket
; a7 i- w" B" {- [
& B9 J, Y0 P; Q0 ]3 o% w
}: |' ]+ d% s* `9 Z3 ^, q3 ]2 R# J1 |8 v
; l! G$ F. ` y% b* Q
socket.onerror = function(){
/ k/ K. d* l5 ? _% v/ p0 B# ]0 _
M, F! J I8 j5 e2 [; {
//错误触发9 n( q# X7 R. a$ U. N
$ ~" P2 L D2 [
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>9 ]" D9 v0 G0 O0 c
<html>4 Q k2 D4 ^$ y) |7 k; b) T
; F, ?& x5 o) ^. S, f
<head>; O o* ^6 o+ _. [' j2 [, W* d
<meta charset="UTF-8"> i9 ]9 i7 ^/ P! G6 Z: \( o. h
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
' \0 D7 ^1 x8 t. V
<title>WebSocket</title>2 h: {/ o7 H" T% Y% w
</head>2 g/ O4 ? h7 a# W- m3 s: Q' l
) B$ y8 P/ C0 N
<body>0 Q) `7 Q1 D \5 H. H
</body>
5 l: N; q5 J3 ]& Z
<script>
: h) H) D0 P' v- N9 a) ]/ k, i4 g4 ?
var socket;
% h: b/ N F( Z; K
if (window.WebSocket) {+ l) m( f% `7 m4 S
socket = new WebSocket("ws://localhost:8080/myapp");
; Q9 c! U5 U U0 |
socket.onmessage = function(event) {( I* `0 S+ h* _' |$ Z
alert("Received data from websocket: " + event.data);7 o7 Q: [) K7 W, A4 [( Q
}
: ? X" A# l8 y) I2 O6 J9 E
socket.onopen = function(event) {' q1 y/ w$ b" P8 h* m4 |6 Q
alert("Web Socket opened!");
& d' f l p, k! j) `1 ~
};, C; ~+ F- l! c- G: ~# h1 T
socket.onclose = function(event) {
) c- l+ Y s4 q2 S7 b
alert("Web Socket closed.");; ^3 V, o6 `* v
};) f' [! F3 x: i* l% j
} else {
$ p, ~, i! i2 R7 X
alert("Your browser does not support Websockets. (Use Chrome)");
( ^0 n8 F$ |. s( Y* e' y, i
} F' j; V2 ^7 w
& G/ s* e" ~/ k
function send(message) {5 _7 S( b! ?0 z! a* B9 [7 a
if (!window.WebSocket) {/ V5 P9 q+ |. r1 w* M
return;
* S( L4 z% K: t& F
}
0 n( i+ W& j0 D+ w$ J: Y. {
if (socket.readyState == WebSocket.OPEN) {
$ F1 C( y2 W" V1 r0 D7 C2 c
socket.send(message);
+ F: A6 G) |; ~" F* x" u8 L$ D
} else {
9 W$ @* i) P" |, @5 K
alert("The socket is not open.");8 P' g1 E/ [5 ^6 u
}( W& `7 |3 }# s | h& x
}( V, |7 M* H- W- s2 R' G
</script>0 \! [4 H; u& Q4 z
: j2 _( a% r8 `; S3 l
</html>

复制代码

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

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