在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>3 L" G' q" R! D, B
<html xmlns="http://www.w3.org/1999/xhtml">
. ?& T" a q+ v& ?
<head>
2 s; r/ X5 \, ^) i1 g2 L9 R
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
& f5 t n, [& c7 x
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
8 ]. g3 Y8 n1 x" [+ Q( c7 m0 A$ L
<title></title>' J0 u5 x! u; f- |$ ]
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
( m9 `4 F( n1 }: I* Q! L
<script>0 N5 F& N" ^8 @- Z0 F7 G
var ws;
& Z1 N5 ?5 {( {& z9 z, | R( _" d- Y
$().ready(function () {( @. `/ ^" u9 r4 G5 @9 w T
$('#conn').click(function () {# E6 l" G) a$ E6 }" V: i U
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());: P% b5 i. n8 H9 i# `! m& _& f
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
, s2 G& I1 M0 W0 J4 ]! f6 }4 }' U
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
, k8 w" @$ \$ R- X: O k* H
//var host = "ws://192.168.85.128:8085/api/WSChat";
: Q' s7 C6 V0 a6 |, O
//webSocket = new WebSocket(host);
2 r4 c v s0 I0 u i7 {
* x" U# {" P! I+ \: ~8 m
$('#msg').append('<p>正在连接</p>');0 i! b1 ]0 S' `7 P( ?+ C
. f/ c f0 {, S0 B% @/ K
ws.onopen = function () {
0 h2 V; X2 R/ f! C' r* K' _3 a
$('#msg').append('<p>已经连接</p>');
6 l9 y) Q3 \6 k* d5 E6 a8 t: @/ s6 s
}
. }9 D7 B v0 q! Z
ws.onmessage = function (evt) {! U7 [" O' V. H( E$ L
$('#msg').append('<p>' + evt.data + '</p>');
K2 {3 B% z" J& ~
}
7 S& Y @- ]# ]2 }
ws.onerror = function (evt) {
- v9 k# X, L3 p( `: T4 L8 H
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
' K& Z j8 v; X% {. l
}# `, b! n/ ~1 p* r$ s% z- {
ws.onclose = function () {* e8 J- D; O/ D6 ?, W4 `
$('#msg').append('<p>已经关闭</p>');
1 H5 A+ O9 o2 g$ F" ^3 N/ n9 V
}
5 b* P* N4 n, U/ g
});4 C1 D! S8 r" \( c, B
" C5 j) V; n+ g' B: T; h. Q
$('#close').click(function () {
1 ~: H8 f1 P) W
ws.close();( S5 ?& L4 u/ {2 e5 X* ]% C* n. X
});
. S$ z3 i0 }1 x+ E w
5 U+ d# B* e8 L2 a( E
$('#send').click(function () {% G" D- a% u$ d: B
if (ws.readyState == WebSocket.OPEN) {# u. [4 r; F$ T0 \4 J8 W
ws.send($("#to").val() + "|" + $('#content').val());! V* F. K, o. `" o3 E% m
}+ I& J0 ]" i# r( s
else {
5 Z3 x1 R( B& _' e' Q. C) k, b- o
$('#tips').text('连接已经关闭');
* o/ Z7 F7 J+ I" q
}
6 o* H- C# }; y: s4 n$ h1 y/ P* R
});
* i* y( f/ x8 T: g9 g
W Q, v$ \, g
});" L# }& }; t+ v
</script>
: d# u& @" p3 L6 t8 F
</head>1 M5 v% e9 h r- h$ Q, h8 A
<body>) U. N$ G2 U7 d C/ ?! L7 u
<div>
. C/ w+ D# H* w
<input id="user" type="text" /> x( p) E) h6 R, j0 _+ g
<input id="conn" type="button" value="连接" />/ }5 Y1 T2 N7 h3 l2 j& o
<input id="close" type="button" value="关闭"/><br />, o8 k! {/ u$ ^$ @+ E6 e3 S
<span id="tips"></span>
, t' D9 D7 m6 ?1 L1 X+ A2 a
<input id="content" type="text" />
* u% o$ n% d3 S6 ~0 {6 ^
<input id="send" type="button" value="发送"/><br /># Y! n: O* \) }2 u
<input id="to" type="text" />目的用户6 H# `' z7 c& P% c! @
<div id="msg">! Q. m/ ]* x; Z8 U- ?
</div>+ D& _- z: z' \" K9 L& ?3 L* U, P' h
</div>3 s/ ~. Q8 q- w6 T4 L `) p% H
</body>8 p# ]1 S. F4 h$ o
</html>

复制代码

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

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

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

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

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

浏览过的版块