在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>& j0 v t/ N' |8 \8 K s
<html xmlns="http://www.w3.org/1999/xhtml">9 k" i! ^! O, i9 ]$ q/ M
<head>
( N3 s1 x/ I R, B; @0 B. A
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
" }1 n( y, I2 G `% T. N, `7 A
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
- w! i7 a: ~7 X* B
<title></title>
) Y# ~6 I7 U u
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script># O1 a+ Z% p. ?) c' m
<script>, C* D+ W6 O8 g
var ws;
+ I* ?( w0 H/ [ u* V
$().ready(function () {
- t6 [ S' z2 p* \2 P8 O! t; {( R
$('#conn').click(function () {
9 `4 B3 {) L: {& g! U2 s9 R
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
/ S, l, n% h5 G$ s4 c' u
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());' ?- D4 P- n4 R
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();8 Y2 V- J! n; b. K4 l& ~0 G
//var host = "ws://192.168.85.128:8085/api/WSChat";
. y$ d6 E/ ^. T" E2 m% S- T$ L
//webSocket = new WebSocket(host);: ~: q- j+ p& I6 }! g
! r7 I: z( u" O/ F4 @4 W
$('#msg').append('<p>正在连接</p>');
+ p& ^. L5 D4 G8 _* b8 D7 d
/ d/ T$ F4 O) Y; w
ws.onopen = function () {6 Z, }7 ?3 T* Y) ]* G9 t. w
$('#msg').append('<p>已经连接</p>');
9 Y m, P0 u* e; \ e& G
}
" z. K( |0 W. R9 I5 c
ws.onmessage = function (evt) {7 V, D7 `4 S- S% h9 l3 z2 R E
$('#msg').append('<p>' + evt.data + '</p>');
* R" r1 \% ]' a0 E- R2 R3 ^0 `
}* S$ O& X5 y2 W, ^
ws.onerror = function (evt) {0 s$ ]8 H9 F6 X% U0 ^; W
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');, s, \4 `4 K2 j6 r4 O# W
}1 |! @' P/ F; o- M) }" y% S
ws.onclose = function () {
2 w! Y( e: J5 j0 m
$('#msg').append('<p>已经关闭</p>');5 }# P. y8 |3 z/ a; `
}0 r7 J" o2 ^& ~2 U. m7 h& r: E
});! m- u- ?( Q$ h) |8 Q7 d/ \
& a' k! t$ J" ]- D
$('#close').click(function () {
9 A% i, k; Y% O" b, l7 I7 s
ws.close();
# _* m5 l0 P2 T& w% f1 Z. w
});
3 p; I/ g7 w4 D" ?8 @) N
% `9 m+ x3 M) e& ]
$('#send').click(function () {
4 c$ X% ^' @5 ?' Z" l
if (ws.readyState == WebSocket.OPEN) {& ~- c- B! F& {- H2 }
ws.send($("#to").val() + "|" + $('#content').val());! Y" ]2 M, A* H7 O, F, r' f
}
% k4 Q9 s$ O0 c, n/ j" Y
else {
; n3 T9 r+ }0 D4 ]
$('#tips').text('连接已经关闭');2 {: V- y$ x4 A) c
}
2 K! G b- s8 c0 s; z7 O
});; n4 t F$ H: }4 z8 z/ [
. r' }# r1 O, w9 q
});0 m' C& Z5 }1 T8 L: t3 J* ?
</script>
: L. p1 I9 i/ U% O, q* B# Y0 Z- v0 _; |
</head>8 z4 \0 {/ m( ?+ J3 K$ ?+ c6 H$ c' |
<body>. g, _1 r4 M- b F7 q8 I1 j3 `( P
<div>
( O2 ]/ `! i# [0 h- {, Z' t
<input id="user" type="text" />
. ?# O4 \# G+ _! O# b" z/ I
<input id="conn" type="button" value="连接" />
4 ]# q: W, ^4 H8 o
<input id="close" type="button" value="关闭"/><br />
7 ]+ l9 F! D) O% ~! U! w5 J& Y( z
<span id="tips"></span>8 L$ j: t4 p, F/ y& U" K
<input id="content" type="text" />8 b- O/ |0 N- ~1 S" i, O6 O
<input id="send" type="button" value="发送"/><br />
8 D( p( P( ]3 m0 F
<input id="to" type="text" />目的用户- }/ l1 C$ ]& X5 T5 a
<div id="msg">
5 ^6 ^" c1 @) I2 R. [; S& U
</div>0 j" _6 R0 c6 G
</div>6 S( e- B7 z% E* ^1 C5 t" t5 R0 V
</body>
^+ i4 T# c6 r! E. P. c
</html>

复制代码

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

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

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

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

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