在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> G" _4 C$ v8 t% `# m- P% w
<html xmlns="http://www.w3.org/1999/xhtml">
+ R% ?; E! j) @& V
<head>& z2 j8 H5 y- c0 K, T
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
( X/ B% j% ~2 b; S$ Y$ T+ M$ C
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
% @' H) d0 t( y8 ?+ f+ }
<title></title>! R6 `$ o" g7 v; p
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>1 B/ n' P: b* F/ A7 a! v& j
<script>6 h) r9 H" W! a2 ^4 T/ V
var ws;# N$ H' |6 _5 ^' ?
$().ready(function () {, G' x" C0 [; a
$('#conn').click(function () {
! M ~; c0 g* [; k: c+ [ ?: f
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
6 F2 S" R" a Z% h# ]# p1 J
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());- a! [8 p6 ^1 Y: ]
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
- c$ d% R, u8 \3 ~+ R" c+ X7 l
//var host = "ws://192.168.85.128:8085/api/WSChat";
; D3 c% p- z9 R8 [
//webSocket = new WebSocket(host);
0 H6 r6 L0 G8 M! z. n
1 Z+ C# A+ M7 L0 D* s( g! O8 [
$('#msg').append('<p>正在连接</p>');
/ i* t8 R t1 Z* f8 _7 Q) V5 `! Y
/ F! _- B, U/ I9 a4 E4 G
ws.onopen = function () {
6 I- a6 w( q8 y! w. D
$('#msg').append('<p>已经连接</p>');
# q" p% W9 }+ _ s" Z
}
6 v3 a7 S7 K2 A; a0 d& x8 D
ws.onmessage = function (evt) {
6 B: h& ^. I% Q; d+ l
$('#msg').append('<p>' + evt.data + '</p>');
, [3 P, {, J& L, R2 E3 Q
}. E2 d5 [' L3 }
ws.onerror = function (evt) {
+ T6 P8 l5 J) U) k8 q
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
9 o. v3 ]; a4 p
}- \' b/ }9 f9 D
ws.onclose = function () {
1 ?- B* {. {- ?& c
$('#msg').append('<p>已经关闭</p>');
6 P0 ~9 s j' X
}, N6 t1 Q( W$ h! V. a
});
4 V5 N& W+ @' k7 M' o$ h
- F" z0 A- Z( q! [) g) I# t
$('#close').click(function () {
9 c0 B& x; [% A3 i& E; [3 F( G
ws.close();) `9 Y* M/ {5 G! _2 z
});
9 z$ m- o4 R3 x! V' U, t* t' T6 T
1 q( M" E% Z. l
$('#send').click(function () {3 \: T. q6 R, \! w2 R$ D) i
if (ws.readyState == WebSocket.OPEN) {8 E( @& r1 |0 ?7 j+ H, V" q
ws.send($("#to").val() + "|" + $('#content').val());: K6 R, L" E4 k, E. u2 t! H* g
}
: Z( b5 n& X! L+ R* S
else {' R. c7 ?; H d5 q$ ^0 [
$('#tips').text('连接已经关闭');+ T. x! E. }7 p4 Z& W/ ]
}$ X. H+ z2 |) R7 u3 a
});
1 r7 ~8 ~7 Z/ a
' T' N& l0 N5 `6 [
});
5 ?9 f/ m( E |
</script>/ Q4 [) o$ ~2 _+ q
</head>
2 h2 [& U& p" T2 A
<body>: l/ O! {5 p) i, ^' T; ~1 F
<div>" I0 [# D5 K# ^ Q7 ?- N# g
<input id="user" type="text" />
% S0 G: Q9 j) P# q$ w
<input id="conn" type="button" value="连接" />
2 ~ u, A9 i! f1 `9 b4 U& K' D9 W& J
<input id="close" type="button" value="关闭"/><br />
: a- \- R' {& U
<span id="tips"></span>+ k& _; C1 ~4 q% D$ S( v
<input id="content" type="text" />/ x$ ~8 A8 e) _" q5 L& z
<input id="send" type="button" value="发送"/><br />: _/ ]$ i# c7 X( D9 L
<input id="to" type="text" />目的用户' t/ U7 y6 g% h2 i {' ?
<div id="msg">
6 x* A0 D5 ~! Z8 f+ @
</div>
- j- O0 g% ?0 N$ f5 h+ r
</div>
7 ]3 b _) I) C* m
</body>
0 Y A7 |2 R& [2 z+ p, q$ m6 e' ~
</html>

复制代码

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

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

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

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

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