在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>
- u2 S: r9 s0 A
<html xmlns="http://www.w3.org/1999/xhtml">
! i6 z% x# G4 w$ h( g
<head>
$ R4 N: S/ n3 z
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>1 r7 s, H6 D+ G8 g
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
. v* E0 I* T5 p! H/ @
<title></title>
- h. p2 l& c6 f9 {# N" _
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>8 |: b4 @" M% a8 |) O" C
<script>4 x4 a. l, I" Q1 \( n2 Q# G9 _2 w& x
var ws;( Z, A. Z& J- y3 M! Q# \
$().ready(function () {
# I8 L8 W: e8 p6 ~
$('#conn').click(function () {% ] p, d. d- B' W
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
( w, h1 N/ }5 s, o, x; B# A4 s) K
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());1 [: d9 E& v0 q7 |+ J
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();* p9 H! s+ |) n4 R- ]$ ]4 g. ~
//var host = "ws://192.168.85.128:8085/api/WSChat";; V8 x2 p7 W" U n
//webSocket = new WebSocket(host);) x! }3 |/ I. b# b/ v' o) m- r: L
% |* b9 e9 c9 d J+ O6 J1 ~# J
$('#msg').append('<p>正在连接</p>');+ z7 F0 Z6 |7 {, G; `: u
4 @6 u$ R' z' Z
ws.onopen = function () {+ u& N, v" O( o) E% u
$('#msg').append('<p>已经连接</p>');7 h+ _/ h$ x* S1 I
}
% e) v% A$ w: R+ L
ws.onmessage = function (evt) {
- d1 O% Q0 b# i0 O: C* q I
$('#msg').append('<p>' + evt.data + '</p>');% R9 m. B& ?$ ]( f& S! Y
}% T6 E1 Z$ W- E" p t
ws.onerror = function (evt) {
, n' Z$ ~4 @. i( h) R4 K$ \
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
' {2 I: ], o* s
}+ y1 K9 ?; K1 t5 b
ws.onclose = function () {
6 D4 u- p! G. j0 h5 K
$('#msg').append('<p>已经关闭</p>');* T) H$ u, _$ T) x5 A6 z3 h( U
}- L2 Z4 d! K, ]) @* K
});5 K6 y L2 _- ?
) x0 H) [5 s& A$ j& X i. ^+ N$ t
$('#close').click(function () {
. v6 C& d' U8 ?" f% y
ws.close();$ `$ d: J. G0 `4 e& @) n
});! t: }: ?: C7 m- N! z
' a. F* w7 S6 @
$('#send').click(function () {
) T# z' O. g& c
if (ws.readyState == WebSocket.OPEN) {$ N& O( P2 b( |- R4 Z3 U
ws.send($("#to").val() + "|" + $('#content').val());5 m$ h! z+ C$ o7 Q0 w( X. _4 K
}
; I. n* i- }1 j: C
else {
- o! d9 B: |8 h4 E' c: @% N$ |
$('#tips').text('连接已经关闭');8 y: |& A7 `* _. h, T5 F
}
2 Y& d" B$ @9 k, d0 a. P
});
+ g- y, u$ T/ F% I
" [/ O) |0 k0 J2 G. y6 z" ?
});$ c1 A% e/ z9 A/ F+ V d! @
</script>
+ @- C q2 J: Z* \' V R% w1 g0 F
</head>2 z% I: j: {( c- y# u9 B& C3 U
<body>5 I' L5 R7 z' e: c7 ~8 Q
<div>
, P( ~9 [/ _" p% k0 @
<input id="user" type="text" />
1 u# A" R1 I9 W! B/ [. M
<input id="conn" type="button" value="连接" />9 z& P$ S0 G5 H4 q
<input id="close" type="button" value="关闭"/><br />' J+ Z C6 p3 D& W2 n1 n' a0 m' L
<span id="tips"></span>
! v* l8 f1 g: y; @- H
<input id="content" type="text" />/ u7 f- \9 ~/ |- z+ u
<input id="send" type="button" value="发送"/><br />% K, x; `* l% p! k
<input id="to" type="text" />目的用户
% E- k* I, d% z0 O' [
<div id="msg">
, l' q9 z1 B" a4 }& X- H
</div>/ |% e3 H1 q+ a3 K" g6 l
</div>
; _$ y# d& _5 C5 C, a" Q0 M8 J
</body>2 W' U/ h/ n3 P, I, @
</html>

复制代码

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

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

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

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

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