在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>+ v3 `- ~0 K4 S8 z/ [7 s
<html xmlns="http://www.w3.org/1999/xhtml">6 T6 ^( p, O' G! d& z
<head>
6 T! w& v2 Y9 o( Q1 d
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
' r. ]: t! _2 X* K
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>( k! y# U2 `: l& w% c; m4 S
<title></title>. C* X2 O' o9 Y$ f% y! U
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
% \& F% X! F% {' P! j4 |4 ^' r* G
<script>1 o2 o/ u8 ~& u
var ws;
4 \0 G1 y) j8 _2 l7 o$ b4 k
$().ready(function () {
, s. L" A: D, a5 f! l" [4 w
$('#conn').click(function () {2 n) \# i% i4 {3 \ ]
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());8 ^! _, c# s7 Z: M2 r/ `; m
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());* |% I' c( d& O0 K) ^. h6 L( Y& t1 w
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
; K0 T: ?/ d$ G, y8 D# c1 B! n
//var host = "ws://192.168.85.128:8085/api/WSChat";
5 S: {8 d/ z- F% }
//webSocket = new WebSocket(host);
$ |( g& e% z* G- w9 \
- A9 E. C6 F1 ^5 {2 j0 q% K
$('#msg').append('<p>正在连接</p>');) O: A3 G6 C/ L2 A# ~9 g. m
+ K3 u8 @, g; C9 i3 w- Z1 o, |; p
ws.onopen = function () {
! x9 K9 ]3 o7 |$ i) B
$('#msg').append('<p>已经连接</p>');: q# r7 h% {( U% e
}
' x8 {+ a5 [/ F$ T5 l4 b
ws.onmessage = function (evt) {
- i/ `: J" J" l6 S/ v0 g* Y
$('#msg').append('<p>' + evt.data + '</p>');* O5 Z% O( M1 U! E
}: b6 g. i, X L d2 a7 R" W/ z
ws.onerror = function (evt) {
+ z9 Y0 a' F) `
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');9 p) H/ x& d0 d4 l
}, c+ `' M) w+ R& g4 E: Z8 B* D- @
ws.onclose = function () {
- C8 _, k% u% F( ?
$('#msg').append('<p>已经关闭</p>');* V* j; X9 s1 u: }2 Y+ }+ A/ B
}. p6 _) y0 w5 c2 V/ r# s7 k$ s0 |3 L
});; s6 I5 C* G; t7 J" \8 W4 |& M9 c
# P) L+ W2 [2 a0 Y, l
$('#close').click(function () {
0 D2 t$ H! s& {" T) f& g; u
ws.close();
; V# K7 l5 S9 ^ ]* B
});: R3 Q" o9 r& K% |7 f% y9 a* M
5 t( K A) S7 i$ {; r0 ]
$('#send').click(function () {# {# A+ B' C0 }+ I
if (ws.readyState == WebSocket.OPEN) {$ @6 [0 u9 x& {( [- H
ws.send($("#to").val() + "|" + $('#content').val());9 C, e- C4 v% `# M% D1 M
}' h9 t4 C6 }. d. B: w$ c: n2 s
else {1 E& s" }% V2 ]0 z! w% Y
$('#tips').text('连接已经关闭');
& j! ^6 P0 x, E" Y l! E) l) P5 Z; r
}
3 O$ F7 K9 H* i0 E1 ]7 j
});
0 f, C* P( a% Q+ ]
8 Z6 h, @+ Z" [# Q1 p
});7 _% C! r& ]" a4 c% ?( T8 l
</script>% f' U6 o7 f2 t& _
</head>. O1 ]9 n1 F6 r3 o8 e
<body>! m- t$ W+ {2 D% K; Y$ u3 O% j
<div>
5 a5 g, ~, F7 D7 b3 \9 U
<input id="user" type="text" />
4 y* X+ S; T7 P1 p
<input id="conn" type="button" value="连接" />( e g; b' {; J1 t
<input id="close" type="button" value="关闭"/><br />
! D7 L0 U3 D, ]( _
<span id="tips"></span>4 }& X; {. t1 V- Y$ |: }5 n
<input id="content" type="text" />$ A9 j. ]1 [7 S8 d
<input id="send" type="button" value="发送"/><br />
- W2 d' s& ]3 h' a" A- D1 ~( {0 ?
<input id="to" type="text" />目的用户
. r& `$ `; C6 a0 j
<div id="msg">
6 l @ t/ f, Y9 m! b8 o
</div>: ~. p! U0 z5 b5 @- b0 j
</div>$ g5 ^, w6 }. R S! s8 ^; u) l5 B+ ^
</body>
" Z4 C% X1 E8 e- {% p% `5 Y) T" g8 n
</html>

复制代码

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

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

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

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

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