浏览器使用WebSocket实时通讯

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

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

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

复制代码

/ s! i b. Q2 M6 g' L
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 + Q8 S+ {4 v8 c3 n6 x3 g2 M c
7 t3 T3 j: @+ g. v" P. v6 X

# S) t- y) ?4 \该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
: F: \4 n+ p$ o- n5 J6 K4 A
t3 z$ I6 i- d( p( X! a# v
//打开
$ C% R* ^9 D* @9 D: I
r9 [- b5 q5 S2 L* m; S6 k
}
9 X- |4 I$ i4 ~
, l0 P! w! c- L" m* g U7 U
: T o& {* ^; O& ?
socket.onmessage = function(){ F t' O& l2 e1 B& ?
7 Z' t s2 h2 k# {( j
//在event.data消息数据
0 B% }0 }/ X8 b, Q
, X4 ?7 @9 s9 ^/ g9 Z
}9 [) R- W( B+ E
; R9 y% E$ z; U7 c, A4 M
socket.onclose = function(){ W6 D4 T! a( r$ J! D- s, J
& F1 O- B: w) J
//关闭WebSocket
9 o2 R) r% D* c v" D0 a1 }
$ y1 S! f" ~8 ^9 w+ D
}) `. ?3 c2 |. o b0 W$ a/ w
' q* D; Z+ S' w
socket.onerror = function(){9 u- m9 m) D ~( u- g% H
7 o( n1 s& s2 }0 b! y
//错误触发: k: [6 O& Y* f! |
) {1 J. D: s, A7 c
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>! H" P) L& g* ^2 m
<html>
9 K* ~* L, J8 d- W6 z/ R% ^: m& {+ A
6 ?: m0 T. R, h6 r7 x+ K
<head>
9 S( d# V, b# g3 ]7 q! r+ `1 y( `
<meta charset="UTF-8">$ E$ |/ b7 E8 B& l) d* a9 {& T$ S
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">8 v. y) K4 |9 \2 |
<title>WebSocket</title>3 [& D/ s5 x$ y
</head>3 p2 O" f7 s' S' h2 r
; V& z5 s/ I a/ Z# B1 a, n; C3 `
<body>; W2 ?3 D; L8 z5 S' p& p
</body>
7 J' }+ _* ?6 k* N
<script>
: e2 a1 t# I; V& P. C) w% m
var socket;
& F; b# r7 J6 c+ P
if (window.WebSocket) {
& [9 _( N7 A n5 C |6 V; ~& K
socket = new WebSocket("ws://localhost:8080/myapp");5 Y# A: _ t! O3 J7 s
socket.onmessage = function(event) {
# j2 A- \) @" i# A* ?6 O; S' F
alert("Received data from websocket: " + event.data);3 Z) Q# A0 U! _8 \/ f$ \
}; e+ P& z g6 D( F2 p }1 r
socket.onopen = function(event) {1 ~' b. N% I& B- x
alert("Web Socket opened!");
: c8 K5 m. w% l
};1 V2 E) \9 y/ a. [) B7 Y# q% e
socket.onclose = function(event) {9 H3 [; ~8 I' W4 s; l' _
alert("Web Socket closed.");
' \3 N1 [# T4 y: x% |6 n. K
};7 l) p* ]7 }. P& @. q
} else {
# O1 B2 ]2 a4 I
alert("Your browser does not support Websockets. (Use Chrome)");7 }2 R& {7 ~: F" o( n& H) A, S. t+ o
}
3 l @+ O6 B$ Z& |7 C" G
6 d5 \- c8 H% x8 n) Y
function send(message) {- i. o5 l0 D- c
if (!window.WebSocket) {8 J4 _$ f' o8 Y( {/ X4 A
return;
}. r1 s5 g% G( U4 C7 r5 F. d& o
if (socket.readyState == WebSocket.OPEN) {
* J6 x' l: r9 n
socket.send(message);1 I: C3 L# r: X& I0 `, B
} else {
alert("The socket is not open.");3 V# [7 H: N2 u( s; h, H
}
: b6 G% a' M% ?
}% w7 M1 `; r. e$ D% a: A
</script>4 |' T* B- l7 E* R3 p% L
( T9 I! Z6 ?- N, C
</html>

复制代码

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

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