浏览器使用WebSocket实时通讯

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

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

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

复制代码

+ j% @$ c0 Y' n7 w0 [0 |; T. @- L
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 o7 v. q/ ~4 y$ c5 x0 t
# T9 z, \" \9 h X. L
; O2 Y2 ~" o. @8 W# g- B. n* N
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
( z" c7 U) |1 A2 ^) P
. C) L8 H8 T$ X" L$ B
//打开
) c9 ~& ^3 A( F4 p8 o9 H/ |2 h
. ?0 P0 D- O. h5 g$ W; Y
}
7 x% g1 {5 O* Z2 T. h3 e% }/ f
9 p0 U2 S: | J0 r
# r4 x1 p. a7 `% K* A2 _9 z
socket.onmessage = function(){
; ~; q# U) N% b) R0 O
( W# t( B$ s# h9 N' y* A# v
//在event.data消息数据
, A1 ^0 y8 J) W- c# X7 n. a
5 @2 y& ?% O7 r4 A# @. _, b: I
}5 W9 ^- V' v5 z L3 r
! |7 X9 u2 |. \5 S
socket.onclose = function(){5 A; y, _2 w7 P
8 M+ b5 r( g8 L# ]: K0 I/ w" z, w+ |
//关闭WebSocket* E. o8 Q M# g
0 d/ t" R& T, b y$ y' r
}2 q0 ]! K2 y( V. @( M9 l
( m1 k6 a! T8 C7 Q
socket.onerror = function(){
- o' {+ T- I% \) |% a/ b
; H+ m; s! j- o) U% _3 w0 s
//错误触发$ C& s' T9 ?$ w/ x# }
/ J8 N% L$ W% w! U7 G7 ]/ ^
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>6 ^( P3 q U0 x1 l2 y
<html>7 ?0 d* }+ o( B7 x
9 T- i2 s+ z9 H y% g4 ]$ L
<head>
5 r5 b7 { g- H" T
<meta charset="UTF-8">
, i8 q9 p$ q6 a9 c6 o
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">, U) H5 Y/ c, I; |
<title>WebSocket</title>
1 I A& C i! m1 M1 U9 |
</head>
/ F; o2 n/ Z$ o: i! c; ]2 ? {
3 T9 w1 w4 f. `0 [8 `% t2 F
<body>
/ I) ]- g* C! f9 }# X* T1 o5 n
</body># A# U3 E# i4 v" }* E, S/ z* A, T
<script>7 }1 H: O" i" { N" \/ x D1 W1 g
var socket;( l& T% I. o5 r
if (window.WebSocket) {/ U8 y5 E8 S& k8 X' h0 l
socket = new WebSocket("ws://localhost:8080/myapp");: ?/ d1 l: ~8 m( V+ q
socket.onmessage = function(event) {& w' \. d0 T! i: K1 c1 W
alert("Received data from websocket: " + event.data);
2 t, G$ m3 @ {, i, F
}
7 f& B- g8 ~1 N1 f9 W" q2 ?8 i
socket.onopen = function(event) {
) E; _* z. I' E4 D4 V7 E6 g
alert("Web Socket opened!");" H" G" m. V( q6 {/ f, g0 k
};2 Y7 H r/ a' L; [7 t( N0 [. D+ A B3 i
socket.onclose = function(event) {
5 ?* D9 x) k' g& Z% q
alert("Web Socket closed.");
1 N# a* B! F n) K! p/ b
};* {" V1 V c, W
} else { l4 M9 L) r2 f, R& Z
alert("Your browser does not support Websockets. (Use Chrome)");8 ~% x8 h; Q2 z8 v9 P
} _& L; X( E! Q
7 I% R, y7 `# _
function send(message) {
7 e* c6 s% ^/ o# t* K
if (!window.WebSocket) {
$ S' G/ Y' x7 x1 H# D0 }- \
return;
2 s D; B" n7 Z2 j; J3 t' b" L
}' Y* [+ S2 E7 h: ~% a* S
if (socket.readyState == WebSocket.OPEN) {- z: w( O4 U; O7 [" H8 o
socket.send(message);
N/ m. N9 @ ^0 A
} else {
alert("The socket is not open."); C" {! k# p, ~- A5 C7 c
}
, z1 Z9 R$ I4 z
}2 F6 b5 H# u$ w. M
</script>* K/ i3 w! K$ S7 g) q& L& G
9 L8 A5 N2 S9 x% d4 l$ W9 I
</html>

复制代码

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

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

浏览过的版块