浏览器使用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:// 前缀。 * g; ?( f# t/ K" q
% o( v; A" R J% K, g3 N* |, }4 l
8 q" D2 s U2 X$ z1 n& V7 M
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
2 u( H( B4 z: U: `+ J# y* S
}1 f6 j) W2 m% s1 M7 O8 m
( d. N! @$ A% d6 S/ p
socket.onmessage = function(){% s5 h$ q+ M' d. l9 c) J" e' a
//在event.data消息数据: d9 N' \. y/ d4 `* _9 |+ {
}. Z3 k0 P" ~* k) t: N
5 J! p' h8 D8 w
socket.onclose = function(){. B5 v& \, X4 C9 F; h; j7 t
//关闭WebSocket
; O/ E" W# g' n) B6 X$ y0 [4 m
}
5 C o, o' r* Q8 k% m7 \2 h
: M, r8 y5 |8 P& q
socket.onerror = function(){
: F3 a+ w( D3 l/ E8 Q
//错误触发
2 ~% H, ^6 z" k
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>* Y3 K3 f' v6 `
<head>
8 m0 W7 t. C7 m0 _+ |) A7 z
<meta charset="UTF-8">" W7 x4 p2 F6 y- G' e
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
! p% h! d2 z, Q
<title>WebSocket</title>, ~- i' t( i( |) s0 ^, Y2 F
</head>+ U' t! {8 t$ w
<body>
% L! G9 ~9 W' k, C
</body>/ l. O0 y S; K% N/ m! D6 f& A
<script>9 I& |* S8 m1 D7 @6 p& a
var socket;. `9 o( S( E7 D' g
if (window.WebSocket) {% x9 m; n( n5 [) g! x: c
socket = new WebSocket("ws://localhost:8080/myapp");
5 C* T) M. |+ ^3 v N4 |
socket.onmessage = function(event) {
4 _4 M3 b4 w; {, h7 t
alert("Received data from websocket: " + event.data);
4 w' T/ o( g8 A1 }" j% F
}+ ~: k+ K8 q. z0 W" ]' {3 [4 N- p
socket.onopen = function(event) {' x; x1 R* D$ f. X
alert("Web Socket opened!");, n* ~/ G2 V j4 v) p
};
2 p7 \) }) b8 q3 Y9 G
socket.onclose = function(event) {& I+ S X, Y# U. A7 s
alert("Web Socket closed.");' e" L) E4 ]( B- k/ s/ A3 I5 D* d
};6 Q6 Y& z7 m: X9 J
} else {
* D( U3 _4 Z5 V. W7 @- Z
alert("Your browser does not support Websockets. (Use Chrome)");
7 R+ I) f4 D: L! c& b% [
} F6 v# h1 l9 d4 P: F# P
# n4 Y) X/ Z7 `2 E
function send(message) {
, Q! f6 ~ ~/ Y2 L# F/ g Z# m" L
if (!window.WebSocket) {
. i8 f8 g6 u6 b+ n
return;4 T4 G: ~, x- `5 H* N
}" ^# Y9 t: j" o# u& m+ ?' j( i9 p5 q
if (socket.readyState == WebSocket.OPEN) {
3 j% |- L* I4 h
socket.send(message);( b6 j2 X4 D& B- {. _' f' D3 @
} else {
8 D9 z5 K; ]6 G! t7 X: i6 A) k7 y% g
alert("The socket is not open.");
; X: d3 R% Z3 p3 T8 ]
}- X/ ]& ` ~& F6 v0 w" v+ T0 C
}/ u; h& \+ c) o( N3 c. f
</script>
! {; K6 _! x0 ?- [6 G9 w* A2 q
</html>

复制代码

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

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