在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>
' W. R9 x( Y0 P% X; V
<html xmlns="http://www.w3.org/1999/xhtml"> t8 h+ @) m: ~2 _4 P {# B
<head>
0 n( _5 o& _- A& d* f/ \
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
" ]; ^) X% P: |' R# t
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
1 l4 U) P" A& f: E1 o
<title></title>. \( I9 G& }' f* U
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
* Y: y+ C: h2 v+ ?, L& K
<script>
1 {0 b. \$ i, ]; i" i
var ws;+ g+ q4 Y* R+ q: d5 q, V/ J
$().ready(function () {( U+ n/ q6 P$ P. A* h5 ~8 c+ b
$('#conn').click(function () {
) @9 e8 }. j+ B$ N9 I" t
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
+ @* ]( E$ h# l/ H$ \! ?" ]
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());+ U1 O# H" U6 j8 `. s7 h$ b
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();5 U/ W0 N) ^3 N4 X0 J, l
//var host = "ws://192.168.85.128:8085/api/WSChat";/ z+ ]/ A1 \; ?* u9 r: [
//webSocket = new WebSocket(host);2 U) i/ E. D6 C6 c3 S
5 L, s' U' ~' D; z1 x3 w
$('#msg').append('<p>正在连接</p>');
' i3 W" K ]0 {2 a* t
; q) f( Z$ _/ N3 R
ws.onopen = function () {+ Q+ ~' z4 R1 D
$('#msg').append('<p>已经连接</p>');6 h& P1 v: a- b f6 j2 J6 A9 L6 A
}
5 Z, t& c* c# v5 M) {
ws.onmessage = function (evt) { Z3 s4 [! t& k/ c! E
$('#msg').append('<p>' + evt.data + '</p>');2 `7 F u$ _! y; Z3 F1 ?) e
}
3 F" x4 }. ]' T
ws.onerror = function (evt) {
- M, s, {& X8 p2 h2 _+ y
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');: |" H; M# p& K
}
* L# _" @) j( z! m v7 d
ws.onclose = function () {9 z( f- }3 P3 V" L: A' v3 {7 _
$('#msg').append('<p>已经关闭</p>');
; ]8 d* m% @7 u1 }3 v: [" R
}
+ F% x; l/ u0 p S6 |; R
});
4 W+ X/ B2 C. q6 t9 B( z0 X. P0 d/ @
, H* S8 N a9 O, c6 q9 D4 M b
$('#close').click(function () {# h. V! I4 T8 c
ws.close();7 m( }) o( R6 o$ W) ~% G' T
});9 B7 s; R& N- C2 z
3 U( p; W( w: t
$('#send').click(function () {
% P/ t* R0 b; w" @1 y& r
if (ws.readyState == WebSocket.OPEN) {
) h3 w3 `' J" ] t7 C: Z6 S; Y- |
ws.send($("#to").val() + "|" + $('#content').val());! \: |- ]$ w2 T+ ~4 B+ c
}3 u f3 {1 P3 e, s& {
else {# N7 H2 h& {$ u5 _* Q3 M
$('#tips').text('连接已经关闭');5 s" `; u1 b' u' F
}
; c2 m- j' |- e) ]7 r
});
& N$ q3 }4 v9 K$ b9 G
; t$ y/ n* M7 i0 s$ h Q6 o- h
}); y3 F6 ?' l/ K* g
</script>
# Y7 a. m; ~2 ^* A7 M- i
</head>
0 }& q1 S1 f0 h8 _3 ?/ `8 ~ H/ e
<body>1 Q% U- l7 t7 t0 [/ u! u; q% m# i
<div>4 o+ t. j" W" ~8 J7 g( L; T, G2 p8 Z
<input id="user" type="text" />
% ^( v$ j. r% [) @
<input id="conn" type="button" value="连接" />: }, f9 S: }# r7 T+ @' Z
<input id="close" type="button" value="关闭"/><br />) D4 r7 e$ l9 R' C' y& s& f
<span id="tips"></span>; J/ `0 F# x. V X
<input id="content" type="text" />
: {0 a4 p5 C* m. o
<input id="send" type="button" value="发送"/><br />% }8 Q* Z5 }; `, z* ~
<input id="to" type="text" />目的用户
4 g& @4 Q/ A& B5 X9 a9 i
<div id="msg">: m6 O& S" h- e; s: o
</div>
2 }3 y& U3 i4 u( y+ J* I
</div>5 `0 |4 w J3 v3 \, j3 z- P ]
</body>
* R. {7 ^* d9 L7 @
</html>

复制代码

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

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

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

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

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