GVKun编程网logo

使用Node.js+Socket.IO搭建WebSocket实时应用（nodejs websocket服务器搭建）

14

本文将带您了解关于使用Node.js+Socket.IO搭建WebSocket实时应用的新内容，同时我们还将为您解释nodejswebsocket服务器搭建的相关知识，另外，我们还将为您提供关于c#–

本文将带您了解关于使用Node.js+Socket.IO搭建WebSocket实时应用的新内容，同时我们还将为您解释nodejs websocket服务器搭建的相关知识，另外，我们还将为您提供关于c# – System.Net.Sockets.SocketException创建websocket连接时、Go实战--golang中使用WebSocket实时聊天室(gorilla/websocket、nkovacs/go-socket.io)、HTML5 websockets与PHP websockets vs node.js websockets？、html5使用go+websocket搭建websocket服务的实例的实用信息。

本文目录一览：

使用Node.js+Socket.IO搭建WebSocket实时应用（nodejs websocket服务器搭建）

使用Node.js+Socket.IO搭建WebSocket实时应用（nodejs websocket服务器搭建）

Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。

使用Node.js+Socket.IO搭建WebSocket实时应用

WebSocket简介

谈到Web实时推送，就不得不说WebSocket。在WebSocket出现之前，很多网站为了实现实时推送技术，通常采用的方案是轮询 (Polling)和Comet技术，Comet又可细分为两种实现方式，一种是长轮询机制，一种称为流技术，这两种方式实际上是对轮询技术的改进，这些 方案带来很明显的缺点，需要由浏览器对服务器发出HTTP request，大量消耗服务器带宽和资源。面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并实现真正意义上的实 时推送。

WebSocket协议本质上是一个基于TCP的协议，它由通信协议和编程API组成，WebSocket能够在浏览器和服务器之间建立双向连接， 以基于事件的方式，赋予浏览器实时通信能力。既然是双向通信，就意味着服务器端和客户端可以同时发送并响应请求，而不再像HTTP的请求和响应。

为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信 息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连 接。

一个典型WebSocket客户端请求头：
使用Node.js+Socket.IO搭建WebSocket实时应用

前面讲到WebSocket是HTML5中新增的一种通信协议，这意味着一部分老版本浏览器（主要是IE10以下版本）并不具备这个功能， 通过百度统计的公开数据显示，IE8 目前仍以33%的市场份额占据榜首，好在chrome浏览器市场份额逐年上升，现在以超过26%的市场份额位居第二，同时微软前不久宣布停止对IE6的技 术支持并提示用户更新到新版本浏览器，这个曾经让无数前端工程师为之头疼的浏览器有望退出历史舞台，再加上几乎所有的智能手机浏览器都支持HTML5，所 以使得WebSocket的实战意义大增，但是无论如何，我们实际的项目中，仍然要考虑低版本浏览器的兼容方案：在支持WebSocket的浏览器中采用 新技术，而在不支持WebSocket的浏览器里启用Comet来接收发送消息。

WebSocket实战

本文将以多人在线聊天应用作为实例场景，我们先来确定这个聊天应用的基本需求。

需求分析

1、兼容不支持WebSocket的低版本浏览器。
2、允许客户端有相同的用户名。
3、进入聊天室后可以看到当前在线的用户和在线人数。
4、用户上线或退出，所有在线的客户端应该实时更新。
5、用户发送消息，所有客户端实时收取。

在实际的开发过程中，为了使用WebSocket接口构建Web应用，我们首先需要构建一个实现了 WebSocket规范的服务端，服务端的实现不受平台和开发语言的限制，只需要遵从WebSocket规范即可，目前已经出现了一些比较成熟的 WebSocket服务端实现，比如本文使用的Node.js+Socket.IO。为什么选用这个方案呢？先来简单介绍下他们两。

Node.js

Node.js采用C++语言编写而成，它不是Javascript应用，而是一个Javascript的运行环境，据Node.js创始人 Ryan Dahl回忆，他最初希望采用Ruby来写Node.js，但是后来发现Ruby虚拟机的性能不能满足他的要求，后来他尝试采用V8引擎，所以选择了 C++语言。

Node.js支持的系统包括*nux、Windows，这意味着程序员可以编写系统级或者服务器端的Javascript代码，交给 Node.js来解释执行。Node.js的Web开发框架Express，可以帮助程序员快速建立web站点，从2009年诞生至今，Node.js的 成长的速度有目共睹，其发展前景获得了技术社区的充分肯定。

Socket.IO

Socket.IO是一个开源的WebSocket库，它通过Node.js实现WebSocket服务端，同时也提供客户端JS库。Socket.IO支持以事件为基础的实时双向通讯，它可以工作在任何平台、浏览器或移动设备。

Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览 器选择适合的通讯方式，从而让开发者可以聚焦到功能的实现而不是平台的兼容性，同时Socket.IO具有不错的稳定性和性能。

编码实现

本文一开始的的插图就是效果演示图：可以点击这里查看在线演示，整个开发过程非常简单，下面简单记录了开发步骤：

安装Node.js

根据自己的操作系统，去Node.js官网下载安装即可。如果成功安装。在命令行输入node -v和npm -v应该能看到相应的版本号。

node -v  
v0.10.26  
npm -v  
1.4.6

 

搭建WebSocket服务端

这个环节我们尽可能的考虑真实生产环境，把WebSocket后端服务搭建成一个线上可以用域名访问的服务，如果你是在本地开发环境，可以换成本地ip地址，或者使用一个虚拟域名指向本地ip。

先进入到你的工作目录，比如 /workspace/wwwroot/plhwin/realtime.plhwin.com，新建一个名为package.json的文件，内容如下：

{
  "name": "realtime-server",
  "version": "0.0.1",
  "description": "my first realtime server",
  "dependencies": {}
}

 

接下来使用npm命令安装express和socket.io

npm install --save express
npm install --save socket.io

 

安装成功后，应该可以看到工作目录下生成了一个名为node_modules的文件夹，里面分别是express和socket.io，接下来可以开始编写服务端的代码了，新建一个文件：index.js

var app = require(''express'')();
var http = require(''http'').Server(app);
var io = require(''socket.io'')(http);

app.get(''/'', function(req, res){
	res.send(''<h1>Welcome Realtime Server</h1>'');
});

http.listen(3000, function(){
	console.log(''listening on *:3000'');
});

 

命令行运行node index.js，如果一切顺利，你应该会看到返回的listening on *:3000字样，这说明服务已经成功搭建了。此时浏览器中打开http://localhost:3000应该可以看到正常的欢迎页面。

如果你想要让服务运行在线上服务器，并且可以通过域名访问的话，可以使用Nginx做代理，在nginx.conf中添加如下配置，然后将域名（比如：realtime.plhwin.com）解析到服务器IP即可。

server
  {
    listen       80;
    server_name  realtime.plhwin.com;
    location / {
      proxy_pass http://127.0.0.1:3000;
    }
  }

 

完成以上步骤，http://realtime.plhwin.com:3000的后端服务就正常搭建了。

使用Node.js+Socket.IO搭建WebSocket实时应用

服务端代码实现

前面讲到的index.js运行在服务端，之前的代码只是一个简单的WebServer欢迎内容，让我们把WebSocket服务端完整的实现代码加入进去，整个服务端就可以处理客户端的请求了。完整的index.js代码如下：

var app = require(''express'')();
var http = require(''http'').Server(app);
var io = require(''socket.io'')(http);

app.get(''/'', function(req, res){
	res.send(''<h1>Welcome Realtime Server</h1>'');
});

//在线用户
var onlineUsers = {};
//当前在线人数
var onlineCount = 0;

io.on(''connection'', function(socket){
	console.log(''a user connected'');
	
	//监听新用户加入
	socket.on(''login'', function(obj){
		//将新加入用户的唯一标识当作socket的名称，后面退出的时候会用到
		socket.name = obj.userid;
		
		//检查在线列表，如果不在里面就加入
		if(!onlineUsers.hasOwnProperty(obj.userid)) {
			onlineUsers[obj.userid] = obj.username;
			//在线人数+1
			onlineCount++;
		}
		
		//向所有客户端广播用户加入
		io.emit(''login'', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
		console.log(obj.username+''加入了聊天室'');
	});
	
	//监听用户退出
	socket.on(''disconnect'', function(){
		//将退出的用户从在线列表中删除
		if(onlineUsers.hasOwnProperty(socket.name)) {
			//退出用户的信息
			var obj = {userid:socket.name, username:onlineUsers[socket.name]};
			
			//删除
			delete onlineUsers[socket.name];
			//在线人数-1
			onlineCount--;
			
			//向所有客户端广播用户退出
			io.emit(''logout'', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
			console.log(obj.username+''退出了聊天室'');
		}
	});
	
	//监听用户发布聊天内容
	socket.on(''message'', function(obj){
		//向所有客户端广播发布的消息
		io.emit(''message'', obj);
		console.log(obj.username+''说：''+obj.content);
	});
  
});

http.listen(3000, function(){
	console.log(''listening on *:3000'');
});

 

客户端代码实现

进入客户端工作目录/workspace/wwwroot/plhwin/demo.plhwin.com/chat，新建一个index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no"/>
        <meta name="format-detection" content="email=no"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">
        <title>多人聊天室</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <!--[if lt IE 8]><script src="./json3.min.js"></script><![endif]-->
        <script src="http://realtime.plhwin.com:3000/socket.io/socket.io.js"></script>
    </head>
    <body>
        <div id="loginbox">
            <div>
                请先输入你在聊天室的昵称
                <br/>
                <br/>
                <input type="text"placeholder="请输入用户名" id="username" name="username" />
				<input type="button"value="提交" onclick="CHAT.usernameSubmit();"/>
            </div>
        </div>
        <div id="chatbox">
            <div>
                <div>
                    <span>Websocket多人聊天室</span>
                    <span><span id="showusername"></span> | 
					<a href="javascript:;" onclick="CHAT.logout()">退出</a></span>
                </div>
            </div>
            <div id="doc">
                <div id="chat">
                    <div id="message">
<div id="onlinecount">
</div>
                    </div>
                    <div>
                        <div>
<input type="text" maxlength="140" placeholder="请输入聊天内容，按Ctrl提交" id="content" name="content">
                        </div>
                        <div>
                            <button type="button" id="mjr_send" onclick="CHAT.submit();">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="./client.js"></script>
    </body>
</html>

 

上面的html内容本身没有什么好说的，我们主要看看里面的4个文件请求：
1、realtime.plhwin.com:3000/socket.io/socket.io.js
2、style.css
3、json3.min.js
4、client.js

第1个JS是Socket.IO提供的客户端JS文件，在前面安装服务端的步骤中，当npm安装完socket.io并搭建起WebServer后，这个JS文件就可以正常访问了。

第2个style.css文件没什么好说的，就是样式文件而已。

第3个JS只在IE8以下版本的IE浏览器中加载，目的是让这些低版本的IE浏览器也能处理json，这是一个开源的JS，详见：http://bestiejs.github.io/json3/

第4个client.js是完整的客户端的业务逻辑实现代码，它的内容如下：

(function () {
	var d = document,
	w = window,
	p = parseInt,
	dd = d.documentElement,
	db = d.body,
	dc = d.compatMode == ''CSS1Compat'',
	dx = dc ? dd: db,
	ec = encodeURIComponent;
	
	
	w.CHAT = {
		msgObj:d.getElementById("message"),
		screenheight:w.innerHeight ? w.innerHeight : dx.clientHeight,
		username:null,
		userid:null,
		socket:null,
		//让浏览器滚动条保持在最低部
		scrollToBottom:function(){
			w.scrollTo(0, this.msgObj.clientHeight);
		},
		//退出，本例只是一个简单的刷新
		logout:function(){
			//this.socket.disconnect();
			location.reload();
		},
		//提交聊天消息内容
		submit:function(){
			var content = d.getElementById("content").value;
			if(content != ''''){
				var obj = {
					userid: this.userid,
					username: this.username,
					content: content
				};
				this.socket.emit(''message'', obj);
				d.getElementById("content").value = '''';
			}
			return false;
		},
		genUid:function(){
			return new Date().getTime()+""+Math.floor(Math.random()*899+100);
		},
		//更新系统消息，本例中在用户加入、退出的时候调用
		updateSysMsg:function(o, action){
			//当前在线用户列表
			var onlineUsers = o.onlineUsers;
			//当前在线人数
			var onlineCount = o.onlineCount;
			//新加入用户的信息
			var user = o.user;
				
			//更新在线人数
			var userhtml = '''';
			var separator = '''';
			for(key in onlineUsers) {
		        if(onlineUsers.hasOwnProperty(key)){
					userhtml += separator+onlineUsers[key];
					separator = ''、'';
				}
		    }
			d.getElementById("onlinecount").innerHTML = ''当前共有 ''+onlineCount+'' 人在线，在线列表：''+userhtml;
			
			//添加系统消息
			var html = '''';
			html += ''<div>'';
			html += user.username;
			html += (action == ''login'') ? '' 加入了聊天室'' : '' 退出了聊天室'';
			html += ''</div>'';
			var section = d.createElement(''section'');
			section.className = ''system J-mjrlinkWrap J-cutMsg'';
			section.innerHTML = html;
			this.msgObj.appendChild(section);	
			this.scrollToBottom();
		},
		//第一个界面用户提交用户名
		usernameSubmit:function(){
			var username = d.getElementById("username").value;
			if(username != ""){
				d.getElementById("username").value = '''';
				d.getElementById("loginbox").style.display = ''none'';
				d.getElementById("chatbox").style.display = ''block'';
				this.init(username);
			}
			return false;
		},
		init:function(username){
			/*
			客户端根据时间和随机数生成uid,这样使得聊天室用户名称可以重复。
			实际项目中，如果是需要用户登录，那么直接采用用户的uid来做标识就可以
			*/
			this.userid = this.genUid();
			this.username = username;
			
			d.getElementById("showusername").innerHTML = this.username;
			this.msgObj.style.minHeight = (this.screenheight - db.clientHeight + this.msgObj.clientHeight) + "px";
			this.scrollToBottom();
			
			//连接websocket后端服务器
			this.socket = io.connect(''ws://realtime.plhwin.com:3000'');
			
			//告诉服务器端有用户登录
			this.socket.emit(''login'', {userid:this.userid, username:this.username});
			
			//监听新用户登录
			this.socket.on(''login'', function(o){
				CHAT.updateSysMsg(o, ''login'');	
			});
			
			//监听用户退出
			this.socket.on(''logout'', function(o){
				CHAT.updateSysMsg(o, ''logout'');
			});
			
			//监听消息发送
			this.socket.on(''message'', function(obj){
				var isme = (obj.userid == CHAT.userid) ? true : false;
				var contentDiv = ''<div>''+obj.content+''</div>'';
				var usernameDiv = ''<span>''+obj.username+''</span>'';
				
				var section = d.createElement(''section'');
				if(isme){
					section.className = ''user'';
					section.innerHTML = contentDiv + usernameDiv;
				} else {
					section.className = ''service'';
					section.innerHTML = usernameDiv + contentDiv;
				}
				CHAT.msgObj.appendChild(section);
				CHAT.scrollToBottom();	
			});

		}
	};
	//通过“回车”提交用户名
	d.getElementById("username").onkeydown = function(e) {
		e = e || event;
		if (e.keyCode === 13) {
			CHAT.usernameSubmit();
		}
	};
	//通过“回车”提交信息
	d.getElementById("content").onkeydown = function(e) {
		e = e || event;
		if (e.keyCode === 13) {
			CHAT.submit();
		}
	};
})();

 

至此所有的编码开发工作全部完成了，在浏览器中打开http://demo.plhwin.com/chat/就可以看到效果了。

上面所有的客户端和服务端的代码可以从Github上获得，地址：https://github.com/plhwin/nodejs-socketio-chat

git clone https://github.com/plhwin/nodejs-socketio-chat.git

下载本地后有两个文件夹 client 和 server，client文件夹是客户端源码，可以放在Nginx/Apache的WebServer中，也可以放在Node.js的WebServer中。后面的server文件夹里的代码是websocket服务端代码，放在Node.js环境中，使用npm安装完 express 和socket.io 后，node index.js 启动后端服务就可以了。

本例只是一个简单的Demo，留下2个有关项目扩展的思考：

1、假设是一个在线客服系统，里面有许多的公司使用你的服务，每个公司自己的用户可以通过一个专属URL地址进入该公司的聊天室，聊天是一对一的，每个公司可以新建多个客服人员，每个客服人员可以同时和客户端的多个用户聊天。

2、又假设是一个在线WebIM系统，实现类似微信，qq的功能，客户端可以看到好友在线状态，在线列表，添加好友，删除好友，新建群组等，消息的发送除了支持基本的文字外，还能支持表情、图片和文件。

来自：http://www.plhwin.com/2014/05/28/nodejs-socketio/

c# – System.Net.Sockets.SocketException创建websocket连接时

c# – System.Net.Sockets.SocketException创建websocket连接时

我是websocket的新手.我在.net 4.5框架中创建了一个控制台应用程序,并使用库“WebSocketSharp”创建了一个示例websocket客户端.我有以下代码 

using System;
using WebSocketSharp;


namespace WebsocketTest
{
    class Program
    {
        public static void Main(string[] args)
        {
            try
            { 
            using (var ws = new WebSocketSharp.WebSocket("ws://192.168.18.186:7884"))
            {
               Console.WriteLine("started");
                ws.Connect();
                ws.Send("START");
                Console.ReadLine();
                }
            }catch(Exception ex)
            {
                Console.WriteLine(ex.Message);
                Console.ReadLine();
            }

        }
    }
}

但是我无法创建与在另一台机器上运行的websocket服务器的连接.我收到这样的错误信息

09-05-2017 16:20:41|Fatal|WebSocket.connect:0|System.Net.sockets.socketException (0x80004005): No connection Could be made because the target machine actively refused it 192.168.18.186:7884
                             at System.Net.sockets.TcpClient..ctor(String hostname,Int32 port)
                             at WebSocketSharp.WebSocket.setClientStream()
                             at WebSocketSharp.WebSocket.doHandshake()
                             at WebSocketSharp.WebSocket.connect()

与我的代码有关的问题是什么？有什么好的websocket库可用吗？

解决方法

查找代码是否存在问题的最简单方法是使用任何支持Web套接字的浏览器尝试连接到端点,并查看会发生什么.如果不确定,你也可以只使用telnet – 因为web-socket开始是一个文本协议(http 1.1标题)而你没有使用SSL,你应该只能打开一个连接并发送一些虚拟标题.如果telnet无法连接：您的代码将无法连接.

如果telnet可以连接,则客户端lib可能存在问题.实际上有一个内置于.NET中的Web套接字客户端,您应该可以使用它(ClientWebSocket)

Go实战--golang中使用WebSocket实时聊天室(gorilla/websocket、nkovacs/go-socket.io)

Go实战--golang中使用WebSocket实时聊天室(gorilla/websocket、nkovacs/go-socket.io)

生命不止，继续 go go go!!!

其实，早就应该跟大家分享golang中关于websocket的使用，但是一直不知道从何入手，也不能够很清晰的描述出来。

今天就浅尝辄止，通过第三方库实现websocket。

WebSocket

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
WebSocket通信协议于2011年被IETF定为标准RFC 6455，并被RFC7936所补充规范。

WebSocket协议支持（在受控环境中运行不受信任的代码的）客户端与（选择加入该代码的通信的）远程主机之间进行全双工通信。用于此的安全模型是Web浏览器常用的基于原始的安全模式。 协议包括一个开放的握手以及随后的TCP层上的消息帧。 该技术的目标是为基于浏览器的、需要和服务器进行双向通信的（服务器不能依赖于打开多个HTTP连接（例如，使用XMLHttpRequest或iframe和长轮询））应用程序提供一种通信机制。

gorilla/websocket

A WebSocket implementation for Go.

github地址：
https://github.com/gorilla/websocket

Star: 4307

获取：

go get github.com/gorilla/websocket

Server

其中，用到了satori/go.uuid：
Go实战–golang生成uuid(The way to go)

server.go

package main

import (
    "encoding/json"
    "fmt"
    "net/http"

    "github.com/gorilla/websocket"
    "github.com/satori/go.uuid"
)

type ClientManager struct {
    clients    map[*Client]bool
    broadcast  chan []byte
    register   chan *Client
    unregister chan *Client
}

type Client struct {
    id     string
    socket *websocket.Conn
    send   chan []byte
}

type Message struct {
    Sender    string `json:"sender,omitempty"`
    Recipient string `json:"recipient,omitempty"`
    Content   string `json:"content,omitempty"`
}

var manager = ClientManager{
    broadcast:  make(chan []byte),register:   make(chan *Client),unregister: make(chan *Client),clients:    make(map[*Client]bool),}

func (manager *ClientManager) start() {
    for {
        select {
        case conn := <-manager.register:
            manager.clients[conn] = true
            jsonMessage,_ := json.Marshal(&Message{Content: "/A new socket has connected."})
            manager.send(jsonMessage,conn)
        case conn := <-manager.unregister:
            if _,ok := manager.clients[conn]; ok {
                close(conn.send)
                delete(manager.clients,conn)
                jsonMessage,_ := json.Marshal(&Message{Content: "/A socket has disconnected."})
                manager.send(jsonMessage,conn)
            }
        case message := <-manager.broadcast:
            for conn := range manager.clients {
                select {
                case conn.send <- message:
                default:
                    close(conn.send)
                    delete(manager.clients,conn)
                }
            }
        }
    }
}

func (manager *ClientManager) send(message []byte,ignore *Client) {
    for conn := range manager.clients {
        if conn != ignore {
            conn.send <- message
        }
    }
}

func (c *Client) read() {
    defer func() {
        manager.unregister <- c
        c.socket.Close()
    }()

    for {
        _,message,err := c.socket.ReadMessage()
        if err != nil {
            manager.unregister <- c
            c.socket.Close()
            break
        }
        jsonMessage,_ := json.Marshal(&Message{Sender: c.id,Content: string(message)})
        manager.broadcast <- jsonMessage
    }
}

func (c *Client) write() {
    defer func() {
        c.socket.Close()
    }()

    for {
        select {
        case message,ok := <-c.send:
            if !ok {
                c.socket.WriteMessage(websocket.CloseMessage,[]byte{})
                return
            }

            c.socket.WriteMessage(websocket.TextMessage,message)
        }
    }
}

func main() {
    fmt.Println("Starting application...")
    go manager.start()
    http.HandleFunc("/ws",wsPage)
    http.ListenAndServe(":12345",nil)
}

func wsPage(res http.ResponseWriter,req *http.Request) {
    conn,error := (&websocket.Upgrader{CheckOrigin: func(r *http.Request) bool { return true }}).Upgrade(res,req,nil)
    if error != nil {
        http.NotFound(res,req)
        return
    }
    client := &Client{id: uuid.NewV4().String(),socket: conn,send: make(chan []byte)}

    manager.register <- client

    go client.read()
    go client.write()
}

Go Client

package main

import (
    "flag"
    "fmt"
    "net/url"
    "time"

    "github.com/gorilla/websocket"
)

var addr = flag.String("addr","localhost:12345","http service address")

func main() {
    u := url.URL{Scheme: "ws",Host: *addr,Path: "/ws"}
    var dialer *websocket.Dialer

    conn,_,err := dialer.Dial(u.String(),nil)
    if err != nil {
        fmt.Println(err)
        return
    }

    go timeWriter(conn)

    for {
        _,err := conn.ReadMessage()
        if err != nil {
            fmt.Println("read:",err)
            return
        }

        fmt.Printf("received: %s\n",message)
    }
}

func timeWriter(conn *websocket.Conn) {
    for {
        time.Sleep(time.Second * 2)
        conn.WriteMessage(websocket.TextMessage,[]byte(time.Now().Format("2006-01-02 15:04:05")))
    }
}

HTML Client

test_websocket.html

<html>
<head>
<title>Golang Chat</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> $(function() { var conn; var msg = $("#msg"); var log = $("#log"); function appendLog(msg) { var d = log[0] var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight; msg.appendTo(log) if (doScroll) { d.scrollTop = d.scrollHeight - d.clientHeight; } } $("#form").submit(function() { if (!conn) { return false; } if (!msg.val()) { return false; } conn.send(msg.val()); msg.val(""); return false }); if (window["WebSocket"]) { conn = new WebSocket("ws://localhost:12345/ws"); conn.onclose = function(evt) { appendLog($("<div><b>Connection Closed.</b></div>")) } conn.onmessage = function(evt) { appendLog($("<div/>").text(evt.data)) } } else { appendLog($("<div><b>WebSockets Not Support.</b></div>")) } }); </script>
<style type="text/css"> html { overflow: hidden; } body { overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; background: gray; } #log { background: white; margin: 0; padding: 0.5em 0.5em 0.5em 0.5em; position: absolute; top: 0.5em; left: 0.5em; right: 0.5em; bottom: 3em; overflow: auto; } #form { padding: 0 0.5em 0 0.5em; margin: 0; position: absolute; bottom: 1em; left: 0px; width: 100%; overflow: hidden; } </style>
</head>
<body>
<div id="log"></div>
<form id="form">
    <input type="submit" value="发送" />
    <input type="text" id="msg" size="64"/>
</form>
</body>
</html>

运行：
运行server，运行client，浏览器打开html文件：

实时聊天室

下面分享一个基于websocket的实时聊天室：
https://github.com/scotch-io/go-realtime-chat

main.go:

package main

import (
    "log"
    "net/http"

    "github.com/gorilla/websocket"
)

var clients = make(map[*websocket.Conn]bool) // connected clients
var broadcast = make(chan Message)           // broadcast channel

// Configure the upgrader
var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        return true
    },}

// Define our message object
type Message struct {
    Email    string `json:"email"`
    Username string `json:"username"`
    Message  string `json:"message"`
}

func main() {
    // Create a simple file server
    fs := http.FileServer(http.Dir("../public"))
    http.Handle("/",fs)

    // Configure websocket route
    http.HandleFunc("/ws",handleConnections)

    // Start listening for incoming chat messages
    go handleMessages()

    // Start the server on localhost port 8000 and log any errors
    log.Println("http server started on :8000")
    err := http.ListenAndServe(":8000",nil)
    if err != nil {
        log.Fatal("ListenAndServe: ",err)
    }
}

func handleConnections(w http.ResponseWriter,r *http.Request) {
    // Upgrade initial GET request to a websocket
    ws,err := upgrader.Upgrade(w,r,nil)
    if err != nil {
        log.Fatal(err)
    }
    // Make sure we close the connection when the function returns
    defer ws.Close()

    // Register our new client
    clients[ws] = true

    for {
        var msg Message
        // Read in a new message as JSON and map it to a Message object
        err := ws.ReadJSON(&msg)
        if err != nil {
            log.Printf("error: %v",err)
            delete(clients,ws)
            break
        }
        // Send the newly received message to the broadcast channel
        broadcast <- msg
    }
}

func handleMessages() {
    for {
        // Grab the next message from the broadcast channel
        msg := <-broadcast
        // Send it out to every client that is currently connected
        for client := range clients {
            err := client.WriteJSON(msg)
            if err != nil {
                log.Printf("error: %v",err)
                client.Close()
                delete(clients,client)
            }
        }
    }
}

app.js:

new Vue({
    el: '#app',data: {
        ws: null,// Our websocket
        newMsg: '',// Holds new messages to be sent to the server chatContent: '',// A running list of chat messages displayed on the screen email: null,// Email address used for grabbing an avatar username: null,// Our username joined: false // True if email and username have been filled in },created: function() { var self = this; this.ws = new WebSocket('ws://' + window.location.host + '/ws');
        this.ws.addEventListener('message',function(e) {
            var msg = JSON.parse(e.data);
            self.chatContent += '<div>'
                    + '<img src="' + self.gravatarURL(msg.email) + '">' // Avatar
                    + msg.username
                + '</div>'
                + emojione.toImage(msg.message) + '<br/>'; // Parse emojis

            var element = document.getElementById('chat-messages');
            element.scrollTop = element.scrollHeight; // Auto scroll to the bottom
        });
    },methods: {
        send: function () {
            if (this.newMsg != '') { this.ws.send( JSON.stringify({ email: this.email,username: this.username,message: $('<p>').html(this.newMsg).text() // Strip out html } )); this.newMsg = ''; // Reset newMsg } },join: function () { if (!this.email) { Materialize.toast('You must enter an email',2000); return } if (!this.username) { Materialize.toast('You must choose a username',2000); return } this.email = $('<p>').html(this.email).text(); this.username = $('<p>').html(this.username).text(); this.joined = true; },gravatarURL: function(email) { return 'http://www.gravatar.com/avatar/' + CryptoJS.MD5(email);
        }
    }
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Simple Chat</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/emojione/2.2.6/assets/css/emojione.min.css"/>
    <link rel="stylesheet" href="/style.css">

</head>
<body>
<header>
    <nav>
        <div class="nav-wrapper">
            <a href="/" class="brand-logo right">Simple Chat</a>
        </div>
    </nav>
</header>
<main id="app">
    <div class="row">
        <div class="col s12">
            <div class="card horizontal">
                <div id="chat-messages" class="card-content" v-html="chatContent">
                </div>
            </div>
        </div>
    </div>
    <div class="row" v-if="joined">
        <div class="input-field col s8">
            <input type="text" v-model="newMsg" @keyup.enter="send">
        </div>
        <div class="input-field col s4">
            <button class="waves-effect waves-light btn" @click="send">
                <i class="material-icons right">chat</i>
                Send
            </button>
        </div>
    </div>
    <div class="row" v-if="!joined">
        <div class="input-field col s8">
            <input type="email" v-model.trim="email" placeholder="Email">
        </div>
        <div class="input-field col s8">
            <input type="text" v-model.trim="username" placeholder="Username">
        </div>
        <div class="input-field col s4">
            <button class="waves-effect waves-light btn" @click="join()">
                <i class="material-icons right">done</i>
                Join
            </button>
        </div>
    </div>
</main>
<footer class="page-footer">
</footer>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/emojione/2.2.6/lib/js/emojione.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="/app.js"></script>
</body>
</html>

style.css:

body { display: flex; min-height: 100vh; flex-direction: column; }

main { flex: 1 0 auto; }

#chat-messages { min-height: 10vh; height: 60vh; width: 100%; overflow-y: scroll; }

nkovacs/go-socket.io

github地址：
https://github.com/nkovacs/go-socket.io

获取：
go get github.com/nkovacs/go-socket.io

main.go

package main

import (
    "log"
    "net/http"

    "github.com/nkovacs/go-socket.io"
)

func main() {
    server,err := socketio.NewServer(nil)
    if err != nil {
        log.Fatal(err)
    }
    server.On("connection",func(so socketio.socket) {
        log.Println("on connection")
        so.Join("chat")
        so.On("chat message",func(msg string) {
            log.Println("emit:",so.Emit("chat message",msg))
            so.broadcastTo("chat","chat message",msg)
        })
        so.On("disconnection",func() {
            log.Println("on disconnect")
        })
    })
    server.On("error",func(so socketio.socket,err error) {
        log.Println("error:",err)
    })

    http.Handle("/socket.io/",server)
    http.Handle("/",http.FileServer(http.Dir("./public")))
    log.Println("Serving at localhost:12345...")
    log.Fatal(http.ListenAndServe(":12345",nil))
}

index.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style> * { margin: 0; padding: 0; Box-sizing: border-Box; } body { font: 13px Helvetica,Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130,224,255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script> var socket = io(); $('form').submit(function(){ socket.emit('chat message',$('#m').val()); $('#m').val(''); return false; }); socket.on('chat message',function(msg){ $('#messages').append($('<li>').text(msg)); }); </script>
  </body>
</html>

浏览器输入：
http://localhost:12345/

HTML5 websockets与PHP websockets vs node.js websockets？

HTML5 websockets与PHP websockets vs node.js websockets？

我决定使用WebSockets作为我的网站聊天应用程序,我刚开始学习websockets,但我有三个不同的选项,node.js,PHP或HTML5.

我想知道的是三者之间有什么区别,我的意思是我不想学习所有这三者,如果有的话比其他人好.

解决方法

Web套接字是一种定义双方如何通信的协议.这是语言不可知的;任何语言都可以提供适配器与另一个Web套接字通信.你提到的三件事是这个适配器的三种不同的实现.对于聊天应用程序,您可能至少需要其中两个：一个服务器,一个客户端.选择您要编写服务器的语言(PHP或Node.js),并使用浏览器中的HTML 5 Web套接字功能与服务器通信.

html5使用go+websocket搭建websocket服务的实例

html5使用go+websocket搭建websocket服务的实例

这次的就直接发放代码截图吧，应该是用go语言做后台一个简易的聊天，这里没用到什么特别的知识，最朴实的来实现效果，主要目的是分享下h5怎么用websocket，go搭建websocket服务的主要部分。

go代码部分：

// WebChat project main.go
package main

import (
    fmt
    net/http
    time

    encoding/json

    strings

    golang.org/x/net/websocket
)

//全局信息
var datas Datas
var users map[*websocket.Conn]string

func main() {
    fmt.Println(启动时间)
    fmt.Println(time.Now())

    //初始化
    datas = Datas{}
    users = make(map[*websocket.Conn]string)

    //绑定效果页面
    http.HandleFunc(/, h_index)
    //绑定socket方法
    http.Handle(/webSocket, websocket.Handler(h_webSocket))
    //开始监听
    http.ListenAndServe(:8, nil)
}

func h_index(w http.ResponseWriter, r *http.Request) {

    http.ServeFile(w, r, index.html)
}

func h_webSocket(ws *websocket.Conn) {

    var userMsg UserMsg
    var data string
    for {

        //判断是否重复连接
        if _, ok := users[ws]; !ok {
            users[ws] = 匿名
        }
        userMsgsLen := len(datas.UserMsgs)
        fmt.Println(UserMsgs, userMsgsLen, users长度：, len(users))

        //有消息时，全部分发送数据
        if userMsgsLen > 0 {
            b, errMarshl := json.Marshal(datas)
            if errMarshl != nil {
                fmt.Println(全局消息内容异常...)
                break
            }
            for key, _ := range users {
                errMarshl = websocket.Message.Send(key, string(b))
                if errMarshl != nil {
                    //移除出错的链接
                    delete(users, key)
                    fmt.Println(发送出错...)
                    break
                }
            }
            datas.UserMsgs = make([]UserMsg, 0)
        }

        fmt.Println(开始解析数据...)
        err := websocket.Message.Receive(ws, &data)
        fmt.Println(data：, data)
        if err != nil {
            //移除出错的链接
            delete(users, ws)
            fmt.Println(接收出错...)
            break
        }

        data = strings.Replace(data, \n, , 0)
        err = json.Unmarshal([]byte(data), &userMsg)
        if err != nil {
            fmt.Println(解析数据异常...)
            break
        }
        fmt.Println(请求数据类型：, userMsg.DataType)

        switch userMsg.DataType {
        case send:
            //赋值对应的昵称到ws
            if _, ok := users[ws]; ok {
                users[ws] = userMsg.UserName

                //清除连接人昵称信息
                datas.UserDatas = make([]UserData, 0)
                //重新加载当前在线连接人
                for _, item := range users {

                    userData := UserData{UserName: item}
                    datas.UserDatas = append(datas.UserDatas, userData)
                }
            }
            datas.UserMsgs = append(datas.UserMsgs, userMsg)
        }
    }

}

type UserMsg struct {
    UserName string
    Msg      string
    DataType string
}

type UserData struct {
    UserName string
}

type Datas struct {
    UserMsgs  []UserMsg
    UserDatas []UserData
}

　　HTML代码部分：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <Meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel=stylesheet href=//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css>
    <script src=//cdn.bootcss.com/jquery/1.11.3/jquery.min.js></script>
    <!--        <script src=//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js></script>-->
</head>
<body>
    <div>
        <div>内容：</div>
        <div id=divShow>
            <!--<div class=list-group-item list-group-item-success>1111</div>
            <div class=list-group-item list-group-item-info>1111</div>
            <div class=list-group-item list-group-item-warning>1111</div>
            <div class=list-group-item list-group-item-danger>1111</div>-->
        </div>
        <div id=divUsers>
            在线：<br />
            <!--<div class=btn btn-default>111</div>-->

        </div>
        <div>
            昵称：<input id=txtUserName value=红领巾 type=text maxlength=20 style=width: 30%; margin-bottom: 15px />
            聊聊：<textarea id=txtContent autofocus rows=6 placeholder=想聊的内容 maxlength=200 required style=width: 60%; ></textarea>
            <button class=btn btn-default id=btnSend style=margin-top:15px>发 送</button>
        </div>
    </div>
</body>
</html>

<script>

    var tool = function () {

        var paperLoopNum = 0;
        var paperTempleArr = [
            '<div class=list-group-item list-group-item-success>{0}</div>',
            '<div class=list-group-item list-group-item-info>{0}</div>',
            '<div class=list-group-item list-group-item-warning>{0}</div>',
            '<div class=list-group-item list-group-item-danger>{0}</div>'
        ];

        return {

            paperDiv: function (val) {

                var hl = paperTempleArr[paperLoopNum];
                paperLoopNum++;
                if (paperLoopNum >= paperTempleArr.length) { paperLoopNum = 0; }

                return this.formart(hl, [val])
            },
            formart: function (str, arrVal) {

                for (var i = 0; i < arrVal.length; i++) {
                    str = str.replace({ + i + }, arrVal[i]);
                }
                return str;
            }
        }
    }

    function showMsg(id, hl, isAppend) {

        if (!isAppend) { $(# + id).html(hl); } else {
            $(# + id).append(hl);
        }
    }

    $(function () {

        //初始化工具方法
        var tl = new tool();

        var wsUrl = ws://172.16.9.6:8/webSocket;
        ws = new WebSocket(wsUrl);

        try {

            ws.onopen = function () {

                //showMsg(divShow, tl.paperDiv(连接服务器-成功));
            }

            ws.onclose = function () {
                if (ws) {
                    ws.close();
                    ws = null;
                }
                showMsg(divShow, tl.paperDiv(连接服务器-关闭), true);
            }

            ws.onmessage = function (result) {

                //console.log(result.data);
                var data = JSON.parse(result.data);
                $(data.UserMsgs).each(function (i, item) {
                    showMsg(divShow, tl.paperDiv(【 + item.UserName + 】： + item.Msg), true);
                });

                var userDataShow = [];
                $(data.UserDatas).each(function (i, item) {

                    userDataShow.push('<div class=btn btn-default>' + item.UserName + '</div>');

                });
                showMsg(divUsers, userDataShow.join(''), false);
            }

            ws.onerror = function () {
                if (ws) {
                    ws.close();
                    ws = null;
                }
                showMsg(divShow, tl.paperDiv(连接服务器-关闭), true);
            }

        } catch (e) {

            alert(e.message);
        }
        $(#btnSend).on(click, function () {

            var tContentObj = $(#txtContent);
            var tContent = $.trim( tContentObj.val()).replace(/[\n]/g, );
            var tUserName = $.trim( $(#txtUserName).val()); tUserName = tUserName.length <= 0 ? 匿名 : tUserName;
            if (tContent.length <= 0 || $.trim(tContent).length <= 0) { alert(请输入发送内容!); return; }
            if (ws == null) { alert(连接失败，请F5刷新页面!); return; }

            var request = tl.formart('{UserName: {0}, DataType: {1}, Msg: {2} }',
                                     [tUserName, send, tContent]);
            ws.send(request);
            tContentObj.val();
            tContentObj.val($.trim(tContentObj.val()).replace(/[\n]/g, ));
        });
        $(#txtContent).on(keydown, function (event) {

            if (event.keyCode == 13) {

                $(#btnSend).trigger(click);
            }
        });
    })

</script>

　　效果图：

　　

今天关于使用Node.js+Socket.IO搭建WebSocket实时应用和nodejs websocket服务器搭建的介绍到此结束，谢谢您的阅读，有关c# – System.Net.Sockets.SocketException创建websocket连接时、Go实战--golang中使用WebSocket实时聊天室(gorilla/websocket、nkovacs/go-socket.io)、HTML5 websockets与PHP websockets vs node.js websockets？、html5使用go+websocket搭建websocket服务的实例等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇reloadJs请问，重启web服务器浏览器会重新加载js吗？（重启浏览器是什么意思）

下一篇VCS课时2：VCS的Debug和UCLI（vcs debug）

相关文章