在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>- H% x* y+ c _+ `) L
<html xmlns="http://www.w3.org/1999/xhtml">
* \4 A$ u( j8 v( p0 @
<head>! C' Z' T) K7 [1 {# g0 \
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>3 t) b! _( L8 }0 ^4 b& [9 W0 i, i- A
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>% h& }) ~; v* P9 Q% W
<title></title>
1 S. ?; b) j p! {) ?, E
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
6 T% ^" `3 S. |
<script>, j( h' @/ B; w, B& G: t2 V* w# {4 u$ J
var ws;
9 t# q* Q, r) O6 x& B
$().ready(function () {
, T4 o5 S2 A8 a+ M0 `$ n
$('#conn').click(function () { ~1 r9 ~3 B& [: U: K" p7 K
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
0 ^4 }& h( z8 M6 m) T1 a
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());4 z3 Y, z8 c/ w. y; ], y
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();1 b" m. ]! g9 X6 l9 q) `5 p4 A
//var host = "ws://192.168.85.128:8085/api/WSChat";
0 N' m2 P- j* q0 L
//webSocket = new WebSocket(host);1 x7 d7 E# o5 D% X
2 W+ G6 A, E) Z( O8 h9 [1 b
$('#msg').append('<p>正在连接</p>');6 M$ d+ {0 i! C- h# ?/ {
( Z. l1 q* N3 n4 c. T) Z- w8 |
ws.onopen = function () {6 {2 P: w- ?! b& F% C1 y
$('#msg').append('<p>已经连接</p>');
# w; @7 |% ]; ~6 o5 T- x9 ?1 M% [
}$ B8 c5 o' a" g! c' y; M4 b
ws.onmessage = function (evt) {3 @8 A! F" {% I7 _) b, k
$('#msg').append('<p>' + evt.data + '</p>');
# T- k! B. J, W, Q' J
}9 M1 d* H+ T i! y& o4 `: R& f+ |( n9 [: n
ws.onerror = function (evt) {
$ O, N/ b& ^3 q' | P
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
4 E& N& d, h4 J8 L: ]1 _
}# I: p/ E5 u+ S1 j$ A; z4 B
ws.onclose = function () {4 b3 i! M+ m* s0 S9 t
$('#msg').append('<p>已经关闭</p>');
- H* U' E K* J @
}/ V& Y2 ]1 ?( H' E6 C
});( {, H7 K+ k! e9 i! B9 u8 V
- v6 Y! y$ }4 H) k" [! _$ u7 f4 U
$('#close').click(function () {% ~3 x' z! ]% M7 r8 k
ws.close();7 _) e1 a% W$ K+ V0 M7 | [
});
& Q1 z& ?9 C/ `
! t+ T5 Z' r$ K
$('#send').click(function () {9 m, ?( _, f6 w* B6 a
if (ws.readyState == WebSocket.OPEN) {- F! a. n( z4 D) n# g
ws.send($("#to").val() + "|" + $('#content').val());# k8 P$ A5 J1 z S* |: s
}
" ?0 V4 T" h4 [# r2 i
else {3 Q& O0 u- s" _
$('#tips').text('连接已经关闭');
2 Y, q, N6 ^0 A. H+ f
}
/ \! J4 E2 z9 @4 i, `9 J
});
4 h7 R# P8 T4 @9 a6 x( J# h
) V& g3 P% B( {5 L8 T8 u1 z) i
});# o6 P6 k# [- l: C# `6 A1 A$ {
</script>- O% y: b- v, @4 i$ S
</head>
( l3 f4 J# u% O/ D1 R# w
<body>7 ^" `* C4 B+ H& `8 j/ P4 ~
<div>
4 k/ w( I% s2 Q2 [
<input id="user" type="text" />* ~/ j6 M" |* s0 l# @
<input id="conn" type="button" value="连接" />
$ R* B! Q2 y4 P+ C( s; n3 H
<input id="close" type="button" value="关闭"/><br />: K9 b+ V) {. w# c* e* z6 U* J: ^
<span id="tips"></span>
; R6 A+ ~' {; ^9 G0 S
<input id="content" type="text" /> ]5 k) w/ j+ v& g' O. T
<input id="send" type="button" value="发送"/><br />2 X6 E/ O/ m- b2 p9 K' l2 l# E; ^
<input id="to" type="text" />目的用户8 f5 |6 A/ ~5 T; [, \) t z3 ~
<div id="msg">1 H7 l$ J( {! e! N/ G; f
</div>& Y, W' n9 Z: p3 x$ |- M( Z
</div>9 k! ]* w- H6 X( S- {& u) t6 d
</body># j" z3 d: c6 c7 g. Y& x6 h" v
</html>

复制代码

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

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

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

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

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