在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>
1 h+ S: f$ }# R2 p
<html xmlns="http://www.w3.org/1999/xhtml">
# j& O! ?0 L3 T! w+ c( u
<head>
) j9 A, h0 z. N
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>- ]6 a1 y U( q4 O; j1 m
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>% k- w2 O. o" n! v8 Q
<title></title>+ [ Z9 U7 \$ L9 `) T$ q: \
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
7 F N/ J5 D( q( I, c
<script>. C# Y, {0 _. g6 ?
var ws;. V, l' ]8 |2 S8 J+ F( B
$().ready(function () {
1 b0 p3 j/ p0 ]: _1 p* F
$('#conn').click(function () {
+ R0 c$ @4 N" W' N- {' [
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());+ b# W- Q7 a3 B' c6 W
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
) d9 F n& q5 ?" ^4 q, m P
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
; v* M P/ _& f
//var host = "ws://192.168.85.128:8085/api/WSChat";
7 S6 s) W) S5 ?& b5 e8 ~8 ~" ]
//webSocket = new WebSocket(host);
' m: O3 ]7 F( V0 Q$ e
1 d& P s0 x7 i% g8 F
$('#msg').append('<p>正在连接</p>');
7 f/ j% K( n x8 w2 v
" R% G; ]- I3 o D+ ]
ws.onopen = function () {
. I' [% e" _7 S9 ]& |. h1 h
$('#msg').append('<p>已经连接</p>');5 E, ?0 P2 f" U7 U2 x- ^9 E% `
}
5 }" X7 V" e) B9 Z1 F
ws.onmessage = function (evt) {
: d7 h" v, G1 S$ i7 z* ^8 T
$('#msg').append('<p>' + evt.data + '</p>');
; p. b+ L1 Q% q
}
; ]4 N9 V1 l+ d0 R
ws.onerror = function (evt) { k7 Y- O4 y, t, Q% v( y
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');. s) d$ s( c$ K
}. Y+ V P* M* L8 Y. u1 R
ws.onclose = function () {
' c0 ?' B- Z# U( c j; K
$('#msg').append('<p>已经关闭</p>');3 x5 j$ @& H- z" `
} P6 U6 h% V* [% M3 o, f6 t1 U
});
! n j* `7 T: q/ R( Z6 w5 Z
6 A7 \, t5 J3 t7 I! u# {
$('#close').click(function () {
! E+ B @# j" D3 Q6 Q% W( ^: f
ws.close();) [; N* P2 S& F4 P
});
4 S% A0 h* l4 ?$ {7 Y2 B' ]
6 N, t! J+ R. r. B! |$ h
$('#send').click(function () {# S- t) K# F8 y* V) h w
if (ws.readyState == WebSocket.OPEN) {
3 I' o, J6 r, E; N- a
ws.send($("#to").val() + "|" + $('#content').val());
u+ ?$ ~' X' l, `' I5 o- d
}5 i$ i3 K1 z+ Z
else {
" J3 S P* b5 j! R6 S
$('#tips').text('连接已经关闭');' g" |8 Q. ~. J( D5 a1 R
}9 G& y" t0 F5 t& w
});" U6 Z& |! g& N" n' f$ ]! m/ t
$ Y# l1 O% H, x8 v
});% `9 p* o& m& F6 U6 l# U: P
</script># C9 g$ Z2 J8 S" J
</head>
3 ^; g. Y- ?; d1 r- N, Q4 I3 |
<body>2 q% L& I: g- |6 T0 ]
<div>
) F% B6 \% A- k6 ]1 K
<input id="user" type="text" />
a( X' ?+ s! b: R$ S: d7 n
<input id="conn" type="button" value="连接" />
+ S+ p( |9 ~& K6 h" L" t7 e/ H1 w
<input id="close" type="button" value="关闭"/><br />' i+ G9 ~! m+ I2 Y; i- Z/ P
<span id="tips"></span>
9 c' N" O6 R F' l7 A
<input id="content" type="text" />
/ g7 P b4 O1 \5 z k: e D+ J
<input id="send" type="button" value="发送"/><br />, I9 N. d {* @
<input id="to" type="text" />目的用户
6 a3 T( d- Z. \8 V9 l3 Y
<div id="msg">0 Q: } N) r l! _# u% T# B
</div>* s) A4 A% ^/ C* q1 {; e( j
</div>
$ w9 ]5 N2 P* _( Q; N( o5 h
</body>
& N8 r8 {6 i, L9 b, q
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

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

[html5] 在IIS上搭建WebSocket服务器（三）

浏览过的版块