浏览器使用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:// 前缀。
4 Y$ f/ g! \6 `- U" n$ d. K9 d/ P5 N+ J: P7 Y1 G. g

5 U- x7 r' j% S2 H1 R2 f& D该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
- G0 V& i3 y4 |( t7 u
}/ d. q' |1 P$ J) W6 L4 ]
' o& _$ y) U0 O' s, N- o( j: ?
socket.onmessage = function(){
6 I: {4 Q5 U0 M* w$ O8 j6 V
//在event.data消息数据
5 c3 R7 \: d7 K7 |- }0 M8 F" H9 d
}. |9 P: z. A- R( P2 J) c
# Q$ x7 e9 j; t
socket.onclose = function(){2 R& a; q4 d; o) S( q
//关闭WebSocket& P7 F9 E5 X- k/ N+ B
}5 s9 g9 J- w. _% v1 W, U9 L8 @
5 j [" [, ?3 r, G( v
socket.onerror = function(){' s% ?! q2 @$ m- _9 w! R0 m7 c2 F
//错误触发
6 H4 Y) |$ O( G: u; p8 a i
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html> ]1 }5 K2 j" K2 \7 r
<head>: B: K" a* `$ u/ C. g
<meta charset="UTF-8">" G5 f7 y' B* s/ W
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">' ~0 P, r6 D c- [1 `
<title>WebSocket</title>
8 }3 T* M: R6 H( U
</head>
$ ]7 @; R2 u W
<body>
1 W( n% p1 e; h3 r
</body>, L+ p. |' j, A/ @) z
<script>
6 [7 C6 Z6 {5 v# N+ R* b
var socket;
& i6 P( Y) k( A% Q* {
if (window.WebSocket) { u3 C# U! D( L# Y. d, \! P
socket = new WebSocket("ws://localhost:8080/myapp");* x2 w( [- \/ F. g: M+ q
socket.onmessage = function(event) {
/ L. }- Y4 @- D
alert("Received data from websocket: " + event.data);
; w% u- T; _& o9 j/ f% V
}
# t: {, F/ a/ g2 y7 ~) T
socket.onopen = function(event) {
2 R; j5 k+ b6 q* S$ a
alert("Web Socket opened!");
' N+ `6 X6 o, d' \* B! Y
};
, \0 f3 ?6 f5 H$ e
socket.onclose = function(event) {
c4 D' C. X& t' K% p6 v
alert("Web Socket closed.");
( B$ W4 e ]. a7 T* V
};3 c1 Q: N3 E z
} else {
; ]0 x0 l8 K4 L, V7 W7 H- d7 f
alert("Your browser does not support Websockets. (Use Chrome)");
2 \% H& v6 {( o! `9 [
}& `; M, Z G3 w1 s, o7 M8 s
) h; `. ^" v( V! Z7 S: ?
function send(message) {
4 D; F$ x4 @, Y" T/ W* J/ M2 a
if (!window.WebSocket) {
1 Q, M9 @3 w" V5 ?1 o/ s. K
return;* y2 X* ~9 ~- M K" A1 V) s
}
1 p$ Y9 A# \; p4 P1 v8 I% }
if (socket.readyState == WebSocket.OPEN) {
) Y+ W7 m1 ]0 o; n1 Z$ y
socket.send(message);
6 t) H9 t+ }2 f4 D! K) g
} else {8 ^6 S8 |. X; i1 j* N$ _
alert("The socket is not open.");! T6 _ @1 N. [; y, O5 h/ e: ]
}7 F6 J3 _4 x! f
}
( o w7 Q/ j5 Z
</script>
4 q9 X' [- Y1 E3 ?9 z. w& b& w
</html>

复制代码

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

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

浏览过的版块