在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>
q( Q* t) h" Y( e+ j0 X! n
<html xmlns="http://www.w3.org/1999/xhtml">- a9 e/ C6 O( B% W3 X* U2 K5 W
<head>) N- h+ h! j" w7 m* t' v8 n
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> w. l" n# |$ K- N. Y$ W
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
8 O- M" }& t& G8 |% M4 j/ Y
<title></title>
. Y! k: f8 v$ ]- k" v9 _) v2 o
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>( } o2 Y# n& }/ Z) @
<script>
( U( v& }2 u3 X2 Q: b
var ws;1 G1 P, z: m" M F
$().ready(function () {
1 T \) y3 M7 n+ p
$('#conn').click(function () {/ U3 i$ l, Z+ q k) S
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
0 F* y, r( p) p$ Q! J5 |/ M8 L9 p& A
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());* x7 b/ F c; O6 y1 o
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
" b0 v8 ?/ Y9 m' f
//var host = "ws://192.168.85.128:8085/api/WSChat";
( V. Q0 [. K+ o) n& E/ J, ?
//webSocket = new WebSocket(host);* Z2 r6 |3 j K2 {
4 O1 S, [) S& s/ w o4 ~
$('#msg').append('<p>正在连接</p>');
& v% g) {# }8 q
2 O5 ?; J8 N" T. k# \* N# A
ws.onopen = function () {
( b5 I2 |6 `3 ~- |# p3 \ q1 O1 O: b
$('#msg').append('<p>已经连接</p>');
4 h/ ^ g3 n6 U% h
}
6 q9 J q3 g& Z7 p& _
ws.onmessage = function (evt) {0 `) [" u: }0 M P: O; B9 `, U! `
$('#msg').append('<p>' + evt.data + '</p>');2 o* K" e1 u+ k# M5 p& a" m
}9 f- |1 Q$ v% V6 x0 u& a9 C
ws.onerror = function (evt) {
) K3 l0 n8 p4 z x. I7 T* @
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
8 L/ B9 L' @* o7 d# j; A. W' f0 c
}4 _/ r# C( S& c
ws.onclose = function () {. l9 U0 v N$ Q7 X! m$ ^
$('#msg').append('<p>已经关闭</p>');$ I4 }' [3 h& h
}
% j& S3 R, _5 ?* i! D2 n; i
});
) o$ S5 o6 ^, R4 c
2 i, e; q4 S: X5 z6 s' ^
$('#close').click(function () {
6 {+ z% F, G$ F2 L$ L I6 L
ws.close();8 H. T4 n3 {( p1 y3 }
});9 [# \4 W; Q% n$ u) @+ L) I
8 J2 {: {5 l0 n5 v
$('#send').click(function () {* X" S' W/ E$ x
if (ws.readyState == WebSocket.OPEN) {
* S& ~, e# l' O+ {
ws.send($("#to").val() + "|" + $('#content').val());3 ~( @# ]% T2 P6 u C
}8 P% ] |: ] P3 z" J: {# ^1 g
else {
# L/ U2 q: E S. b* {7 S
$('#tips').text('连接已经关闭');7 E* }0 }8 i0 U
} z. J/ s6 D1 ]4 C
});
3 ^4 G4 J n# I- |; q
6 c2 P6 q3 ~& P5 K
});
# |$ y) C2 M! z" n' N8 }
</script>
! W$ `7 Y5 P; F+ z1 d$ O; o
</head>
1 _7 P. |7 d6 w" r
<body>
) m p! O( r8 E. n* w' j$ a* J5 |
<div>5 ^* Q& i8 S4 c
<input id="user" type="text" />
3 O9 d Z1 U; d- ^% D* u% m
<input id="conn" type="button" value="连接" />
, Q' w; F4 C2 v& f
<input id="close" type="button" value="关闭"/><br />
( o7 ?& X& p; I# T* ]& T
<span id="tips"></span>0 F9 ^. @" n+ R2 N* h; `
<input id="content" type="text" />5 E }- B& i" P" s
<input id="send" type="button" value="发送"/><br />
& |7 |) T7 E8 n3 {
<input id="to" type="text" />目的用户
+ Q% V! P# a" L& o1 i( |9 f
<div id="msg">
( V% v5 }1 {6 i6 {3 Q' G! l3 V
</div>, V. f% J/ k6 G# Y2 i) \$ \, w
</div>9 V+ R1 N0 h- [" G/ L. I0 v I
</body>$ A7 M( y- e: \4 k
</html>

复制代码

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

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

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

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

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