浏览器使用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:// 前缀。 ' g6 p0 X4 a8 A. W& u4 s( n
9 n8 K5 z' z# l& I" n, q% x
- L% M# g C; W# ~1 \9 `+ K
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
% \ H3 g; r; n8 l% @
}* v* \ h% B( i2 E+ w3 \
+ f8 |3 ] \0 e' G% f1 ~
socket.onmessage = function(){ o# o+ |% [* k3 \
//在event.data消息数据+ }; E0 l" k ?! w
}5 S5 h) ?6 l! R. D/ `
; W; _7 y5 u( r3 {! E( ^
socket.onclose = function(){$ z1 T8 \* @, }6 U% ^ N
//关闭WebSocket
" ^" L9 R( s0 ~/ R0 c
}
! J' B6 g6 o. ^+ p
' B) e- k# z) n9 Q4 @2 P) D
socket.onerror = function(){
' [0 z' Y( r& \: {- b4 n4 y
//错误触发
( ^" }4 U1 H: h# E H- o9 ^# F2 V
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
* W5 e$ S7 b+ t- i" J; P
<head>
' Q7 k8 X1 A. `0 X9 q2 R
<meta charset="UTF-8">4 w3 J/ P+ x! x/ n* x
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
3 J+ o8 [: d$ x# Z" _! A }
<title>WebSocket</title>
& Q4 q! r$ o0 [
</head>
( o) Z; q- {+ d
<body>
, Q9 v9 X: j" c& t* ^6 g
</body>
7 R) H& O* H7 L+ o/ m* j" V
<script>! H7 K7 b0 z7 W8 ^3 o1 `4 T. k
var socket;
7 Z8 m; `! i/ G5 q/ A
if (window.WebSocket) {) n0 |4 M# E% z4 k
socket = new WebSocket("ws://localhost:8080/myapp");
, \* J" T, |9 v) |: W$ Y5 I
socket.onmessage = function(event) {
7 S! ]4 d, P9 t/ I- m6 o% h
alert("Received data from websocket: " + event.data);
4 P n. b0 k8 A" u7 s& W6 p" ?) a
}
) T' w8 M4 T' ]
socket.onopen = function(event) {
- I& s. R# L n- z. ^, m8 o4 I+ j
alert("Web Socket opened!");; g# A; f @0 C
};8 a) T" e4 l- w
socket.onclose = function(event) {
9 U7 Y/ z8 H6 Z! y6 _
alert("Web Socket closed.");! G1 ^( V; `) }8 e
};' N5 P3 t) \8 o5 Z D j: N- f
} else {% D5 @1 Z" M% t$ q! c
alert("Your browser does not support Websockets. (Use Chrome)");/ r, Y1 ~* {' b0 P
}7 [. U1 a& Q6 w; M) ~! [. W
/ _$ p/ E4 [: v) k9 H2 S
function send(message) {
* _8 [- J) {2 O
if (!window.WebSocket) {
3 ] F/ W# y- ]. S3 x
return;
% Z# D, y6 R( s7 `! m
}2 I- {8 I/ N c" o6 Y l! s& x
if (socket.readyState == WebSocket.OPEN) {
" f {8 D8 W7 n; G4 L3 s
socket.send(message);( U9 Y, p. _8 r3 S) s6 B
} else {$ Q' Q1 T. ]* W" k# Z% U' l, _' F
alert("The socket is not open.");
8 X9 j. i! R7 l! X1 t1 b# D4 @, Q
}
' r1 @ n& F c) P+ `; [
}" n/ g u# q& m& D# J
</script>' N: U2 s/ \0 i4 ^+ T$ i& e
</html>

复制代码

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

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